タブメニューの実装はできたのですが
タブメニューを2回目以降タッチしても中身が現れないという事態に直面しています。
とりあえず まずはこうなった経緯
(わかりやすくしたサンプルコード)
html
1<div class="tab-menu"> 2 <ul> 3 <li id="left" class="selected">左タブ</li> 4 <li id="right">右タブ</li> 5 </ul> 6 7 <div class="contents"> 8 <div class="left"> 9 <p>お花コンテンツ</p> 10 </div> 11 <div class="right"> 12 <p>お魚コンテンツ</p> 13 </div> 14 </div> 15</div>
css
1body{ 2 background-color: #f5f5f5; 3} 4 5.tab-menu { 6 width: 500px; 7 margin-left: 60px; 8 9 ul { /* .tab-menuの中のulに対する記述 */ 10 margin: 0; 11 padding: 0; 12 margin-top: 50px; 13 } 14 15 li { /* .tab-menuの中のli */ 16 display: inline-block; 17 width: 120px; 18 height: 22px; 19 padding: 10px 10px 5px; 20 cursor: pointer; 21 background-color: #AECD6A; 22 border-top-right-radius: 10px; 23 font-size: 14px; 24 color: #fff; 25 text-align: center; 26 27 &.selected {/* .tab-menuの中のliの内、.selectedが与えられているものに対する記述 */ 28 background-color: #fff; 29 color: #AECD6A; 30 } 31 } 32} 33 34.contents { 35 background-color: #fff; 36 height: 360px; 37 padding: 20px; 38 39 .right { /* .contentsの中の.rightに対する記述 */ 40 display: none; /* 最初、右のコンテンツは非表示にする */ 41 } 42}
javascript
1window.addEventListener("load", function() { 2 $("li").on("click", function() { 3 $("li.selected").removeClass("selected"); 4 $(this).addClass("selected"); 5 $(".contents div").hide(); // 二つの要素を非表示にする 6 $("." + this.id).show(); // クリックされたボタンに対応する要素を表示する 7 }); 8});
ここまではしっかりと動作してくれます。
が
html
1<div class="tab-menu"> 2 <ul> 3 <li id="left" class="selected">左タブ</li> 4 <li id="right">右タブ</li> 5 </ul> 6 7 <div class="contents"> 8 <div class="left"> 9 10 <div class="left-left"> 11 <p>お花コンテンツ</p> ←お花コンテンツをdivで囲う 12 </div> 13 14 </div> 15 <div class="right"> 16 <p>お魚コンテンツ</p> 17 </div> 18 </div> 19</div>
すると2回目以降表示されなくなります。
右タブを押してから左タブを押すと
消えます。
わからないので参考になる記事または解決方法を教えてください。

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/11 14:13