jQueryトレーニング① サムネイル画像の切替

ここ最近djangoの世界にばかり没頭していたので、思い出す意味も込めてjQueryの復習を始めました。

コンテンツ

ゴール目標

作成した動画を見るのが手取り早いので載せます。

ポイント

各サムネイルをクリックすると、クリックされた画像を右に大きく表示する

環境構築

jsfiddleを使用します。

https://jsfiddle.net/

jsfiddleってなんやねんって人は下記から確認ください。

またこの後出てくるplacehold.jpという便利なimg生成サイトの記述もあります。

https://freeheroblog.com/recommended-experiment-site/

これで環境はOKです。

コード

基本的には下記コードを貼り付ければ問題なく挙動します。

HTML

<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>

<ul>

</ul>

</div>

</div>

CSS

*{
   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;
 }

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

$(function() {
     $("#navi a").on("click", function(ev) {
       ev.preventDefault();
       var $target = $(this).attr("href");
       $("#main img").attr("src", $target);
   });
 });