Q&A
jQueryで、タブをクリックするとコンテンツが切り替わるWEbサイトを作りたいのです。
jQueryで切り替わる仕組みはできたのですが、いざ中身を作ろうと思ったところ、それぞれのコンテンツの<div>の中にさらに<div>を入れたらタブを切り替えたときに表示がされなくなってしまいました。
jQueryをはずして、コンテンツすべて表示させた状態にすれば出てきます。
以下のコードで、tab3がそのような状態になってます。
<div>で囲んだ<p>がどこかにいってしまいました。何が原因なのでしょうか。
写真とコメントがセットのボックスをいくつか並べたページを作りたいです・・・。
HTML & jQuery
<body> <div id="header"> <h1>☆ Welcome ☆</h1> </div> <div id="navigation"> <ul> <li><a href="#tab1" class="current">TOP</a></li> <li><a href="#tab2">PHOTOS</a></li> <li><a href="#tab3">LINK</a></li> <li><a href="#tab4">ABOUT ME</a></li> </ul> </div> <div id="contents"> <div id="tab1"> <h2>タブ１</h2> </div> <div id="tab2"> <h2>タブ2</h2> </div> <div id="tab3"> <h2>タブ３</h2> <div> <p>ああああああああああああああ</p> </div> </div> <div id="tab4"> <h1>タブ４</h1> </div> </div> <div id="footer"> </div> <script> $(function() { $('#contents div[id != "tab1"]').hide(); $("a").click(function() { $("#contents div").hide(); $($(this).attr("href")).show(); $(".current").removeClass("current"); $(this).addClass("current"); return false; }); }); </script> </body>
CSS
body { font-family: Arial, sans-serif; width:980px; margin:0 auto; text-align: center; } /* ----- ヘッダー ----- */ #header { height:150px; background-color:#009b9f; } /* ----- メニュー ----- */ #navigation { height:40px; background-color:#009b9f; margin-top:5px; text-align: center; } #navigation ul{ text-align: center; padding: 0; } #navigation li { list-style-type: none; line-height: 40px; float: left; width: 245px; box-sizing: border-box; border-right: #fff 1px solid; } #navigation a { display: block; text-decoration: none; font-weight: bold; letter-spacing: 3px; color: blue; } ul li a:hover{ background:skyblue; color:#FFF; } ul li a.current{ background:#eee; color:#C15757; } #navigation li:last-child { border: none; } /* ----- メイン ----- */ #contents { min-height:450px; height:auto; background-color:#009b9f; margin-top:5px; } #contents div{ padding:30px 20px; } /* ----- フッダー ----- */ #footer { height:100px; background-color:#009b9f; margin-top:10px; }
回答1件
0
ベストアンサー
javascript
1$("#contents div").hide();
この1行によりdiv要素が全て非表示になっているためですね
javascript
1$($(this).attr("href")).show();
これで表示できるのは**#tab1などのidを持ったdivだけ**です
その子要素のdivまで表示したければ
javascript
1$($(this).attr("href")).show(); 2$($(this).attr("href")).children("div").show(); //この1行を追加
というようにしてみてください
投稿2016/08/03 01:24
総合スコア3116
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/08/03 01:55