宜しくお願い致します。
jqueryの初学者です。本を見てコードを書いたのですが
思うように動作してくれません。
記述に誤りはないような気はするのですが、もしミスがありましたら
教えて頂けると幸いです。
宜しくお願いいたします。
「jquery.html」 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>タイトル</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript" src="sample.js"></script> </head> <body> <div id="container"> <div id="navi"> <ul> <li><a href="images/photo1.jpg"> <img src="images/photo1_thum.jpg" alt="" /></a></li> <li><a href="images/photo2.jpg"> <img src="images/photo2_thum.jpg" alt="" /></a></li> <li><a href="images/photo3.jpg"> <img src="images/photo3_thum.jpg" alt="" /></a></li> <li><a href="images/photo4.jpg"> <img src="images/photo4_thum.jpg" alt="" /></a></li> <li><a href="images/photo5.jpg"> <img src="images/photo5_thum.jpg" alt="" /></a></li> <li><a href="images/photo6.jpg"> <img src="images/photo6_thum.jpg" alt="" /></a></li> <li><a href="images/photo7.jpg"> <img src="images/photo7_thum.jpg" alt="" /></a></li> <li><a href="images/photo8.jpg"> <img src="images/photo8_thum.jpg" alt="" /></a></li> </ul> </div> <div id="main"> <img src="images/photo1.jpg" alt="" /> </div> </div> </body> </html>
「style.css」 @charset "UTF-8"; *{ margin:0; padding:0; border:0; } body{ background:black; } #container{ width:1000px; margin:20px auto; } #navi{ width:300px; float:left; } #navi ul{ height:460px; } #navi ul li{ list-style-type:none; width:150px; float:left; } #navi ul li img{ border:3px solid white; } #main{ width:650px; float:right; } #main img{ position:absolute; border:3px solid white; }
「sample.js」 $(function(){ $("#navi a").click(function(){ $("#main img").before("<img src='"+$(this) .attr("href")+"' alt=">"); $("#main img:last").fadeOut("fast",function(){ $(this).remove(); }); return false; }); });
回答3件
あなたの回答
tips
プレビュー