jQueryでモーダルウインドウを作っています。
サムネールをクリックして、その拡大画像が表示され、背景をクリックすると拡大画像は消える・・・というのはできるようになったのですが、ひとつのサムネールをクリックしたときに、他のサムネールが消えてしまい、拡大画像を消した後はクリックするサムネールが無い!という状態になってしまいます。
<div id="navigation">のところのタブ2をクリックすれば最初のサムネールが並んだ画面に戻ります。ナビゲーション部分でもjQueryをつかっているので、その関係でおかしくなっているのかな?と思うのですが原因がわかりません・・・。
どうすればよいのでしょう??
HTML
1 <div id="navigation"> 2 <ul> 3 <li><a href="#tab1" class="current">TOP</a></li> 4 <li><a href="#tab2">PHOTOS</a></li> 5 <li><a href="#tab3">LINK</a></li> 6 <li><a href="#tab4">ABOUT ME</a></li> 7 </ul> 8 </div> 9 <div id="contents"> 10 <div id="tab1"> 11 <aside> 12 <p>・・・</p> 13 </aside> 14 <p> 15 <img src="#" height="430" width="500"> 16 </p> 17 </div> 18 <div id="tab2"> 19 <a href="img/img1.jpg"><img src="img/thumb1.jpg"></a> 20 <a href="img/img2.jpg"><img src="img/thumb2.jpg"></a> 21 <a href="img/img3.jpg"><img src="img/thumb3.jpg"></a> 22 <a href="img/img4.jpg"><img src="img/thumb4.jpg"></a> 23 <a href="img/img5.jpg"><img src="img/thumb5.jpg"></a> 24 </div>
jQuery
1$(function() { 2 3 $('#contents div[id != "tab1"]').hide(); 4 $("a").click(function() { 5 $("#contents div").hide(); 6 $($(this).attr("href")).show(); 7 $($(this).attr("href")).children("div").show(); 8 $(".current").removeClass("current"); 9 $(this).addClass("current"); 10 return false; 11 }); 12 }); 13 14 $(function() { 15 $("#contents").children().click(function(){ 16 $("body").append('<div id="bg">'); 17 $("body").append('<div id="photo">'); 18 $("#bg").hide(); 19 $("#photo").hide(); 20 $("#photo").html("<img>"); 21 $("#photo img").attr("src",$(this).attr("href")); 22 $("#photo img").attr("width",500); 23 $("#photo img").attr("height",500); 24 $("#photo img").attr("alt","Photo"); 25 $("#bg").fadeIn(); 26 $("#photo").fadeIn(); 27 $("#bg").click(function() { 28 $(this).fadeOut(function() { 29 $(this).remove(); 30 }); 31 $("#photo").fadeOut(function() { 32 $(this).remove(); 33 }); 34 }); 35 return false; 36 }); 37 38 });
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。