ここ最近djangoの世界にばかり没頭していたので、思い出す意味も込めてjQueryの復習を始めました。
コンテンツ
ゴール目標
作成した動画を見るのが手取り早いので載せます。
ポイント
- 各サムネイルをクリックすると、クリックされた画像を右に大きく表示する
環境構築
jsfiddleを使用します。

jsfiddleってなんやねんって人は下記から確認ください。
またこの後出てくるplacehold.jpという便利なimg生成サイトの記述もあります。
これで環境はOKです。
コード
基本的には下記コードを貼り付ければ問題なく挙動します。
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div id="container"> <div id="navi"> <ul> <li><a href="http://placehold.jp/ffaaff/0000ff/450x350.png"><img src="http://placehold.jp/ffaaff/0000ff/140x105.png" alt="紫"></a></li> <li><a href="http://placehold.jp/aaffaa/0000ff/450x350.png"><img src="http://placehold.jp/aaffaa/0000ff/140x105.png" alt="緑"></a></li> <li><a href="http://placehold.jp/aaaaff/0000ff/450x350.png"><img src="http://placehold.jp/aaaaff/0000ff/140x105.png" alt="青"></a></li> <li><a href="http://placehold.jp/aaaaaa/0000ff/450x350.png"><img src="http://placehold.jp/aaaaaa/0000ff/140x105.png" alt="灰1"></a></li> <li><a href="http://placehold.jp/ffffaa/0000ff/450x350.png"><img src="http://placehold.jp/ffffaa/0000ff/140x105.png" alt="黄"></a></li> <li><a href="http://placehold.jp/afafaf/0000ff/450x350.png"><img src="http://placehold.jp/afafaf/0000ff/140x105.png" alt="灰2"></a></li> <li><a href="http://placehold.jp/faafff/0000ff/450x350.png"><img src="http://placehold.jp/faafff/0000ff/140x105.png" alt="ピンク"></a></li> <li><a href="http://placehold.jp/000000/0000ff/450x350.png"><img src="http://placehold.jp/000000/0000ff/140x105.png" alt="黒"></a></li> </ul> </div> <div id="main"> <img src="http://placehold.jp/ffaaff/0000ff/400x300.png" alt=""> </div> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
*{ margin:0; padding:0; border:0; } #container{ width: 1000px; margin: 20px auto; } #navi{ width: 300px; float: left; margin-left: 20px; } #navi ul{ height: 460px; list-style-type:none; } #navi ul li{ list-style-type:none; width: 150px; float: left; } #navi ul li img{ border: 3px solid skyblue; } #main{ width: 650px; float: right; } #main img{ border:3px solid black; } |
jQuery
1 2 3 4 5 6 7 |
$(function() { $("#navi a").on("click", function(ev) { ev.preventDefault(); var $target = $(this).attr("href"); $("#main img").attr("src", $target); }); }); |
ポイント
まず、ev.preventDefault()を使用してイベントの処理を制御しています。
これがないと続け様にサムネイルをクリックすると誤表示をしてしまいます。
またvar $targetで変数を定義して挙動をわかりやすくしました。
コメントを残す