[ jQuery ] eqセレクタ を使ってリスト画像を表示させる -
<script>
$(function( ) {
$('a:eq(0)').click(function( ) {
$('img').attr('src', 'img/gerbera.jpg').attr('alt', 'ガーベラ');
return false;
});
$('a:eq(1)').click(function( ) {
$('img').attr('src', 'img/mountain.jpg').attr('alt', '山');
return false;
});
$('a:eq(2)').click(function( ) {
$('img').attr('src', 'img/dolphin.jpg').attr('alt', 'イルカ');
return false;
});
$('a:eq(3)').click(function( ) {
$('img').attr('src', 'img/bilding.jpg').attr('alt', 'ビル');
return false;
});
});
</script>
<body>
<ul>
<li><a href="img/gerbera.jpg">ガーベラ</a></li>
<li><a href="img/mountain.jpg">山</a></li>
<li><a href="img/dolphin.jpg">イルカ</a></li>
<li><a href="img/bilding.jpg">ビル</a></li>
</ul>
<p><img src="img/gerbera.jpg" alt="ガーベラ"></p>
</body>
