Q&A
分からないこと:タブ切り替えでおすすめ記事を押して切り替えた後、新着記事を押しても戻ることができないので戻れるようにしたい。
試したこと:removeClassをtoggleClassにしたが、駄目だった。
良ければ解決方法を教えてください
<div id="tab"> <div id="left-nav" class="change-bg" class="tabtab"><i class="fas fa-rocket"></i>新着記事</div> <div id="right-nav" class="tabtab"><i class="fas fa-bookmark"></i>おすすめ記事</div> </div> <div class="all-menu is-show"> <div class="menu"> <a href="#"> <img style="vertical-align:bottom" src="img/light-mockup-min-520x300.jpg" class="img-100"> <span class="left-up">ニュース</span> <span class="right-up">NEW</span> <div class="low-title"> <h2>WordPressテーマ「SANGO」の魅力</h2> </div> </a> </div> <div class="menu"> <a href="#"> <img style="vertical-align:bottom" src="img/fafa-2-520x300.jpg" class="img-100"> <span class="left-up">カスタマイズカテゴリー</span> <span class="right-up">NEW</span> <div class="low-title"> <h2>SANGOのショートコードでできること</h2> </div> </a> </div> <div class="menu"> <a href="#"> <img style="vertical-align:bottom" src="img/fafd-1-520x300.jpg" class="img-100"> <span class="left-up">見出し</span> <div class="title"> <h2>記事を華やかに!約40種類の見出しデザ<br class="res-br">イン</h2> </div> </a> </div> <div class="menu"> <a href="#"> <img style="vertical-align:bottom" src="img/faf-2-520x300.jpg" class="img-100"> <span class="left-up">デザイン</span> <div class="title"> <h2>CSSだけで作られたハンバーガーメニュ<br class="res-br">ー&スライダーメニュー<br class="res-br"></h2> </div> </a> </div> <div class="menu"> <a href="#"> <img style="vertical-align:bottom" src="img/OVFPXK1-520x300.jpg" class="img-100"> <span class="left-up">デザイン</span> <div class="title"> <h2>関連記事のパターンを3記事+から選<br class="res-br">べるように</h2> </div> </a> </div> <div class="menu"> <a href="#"> <img style="vertical-align:bottom" src="img/fa-1-520x300.jpg" class="img-100"> <span class="left-up">デザイン</span> <div class="title"> <h2>40種類以上のボタンを用意</h2> </div> </a> </div> <div class="menu"> <a href="#"> <img style="vertical-align:bottom" src="img/faf-1-520x300.jpg" class="img-100"> <span class="left-up">ニュース</span> <div class="title"> <h2>SANGOで約30種類のボックスを挿入し<br class="res-br">よう</h2> </div> </a> </div> <div class="menu"> <a href="#"> <img style="vertical-align:bottom" src="img/f-520x300.jpg" class="img-100"> <span class="left-up">リスト</span> <div class="title"> <h2>SANGOの箇条書き（20種類以上）と引<br class="res-br">用のデザイン</h2> </div> </a> </div> </div> <div class="all-menu"> <div class="menu"> <a href="#"> <img style="vertical-align:bottom" src="img/light-mockup-min-520x300.jpg" class="img-100"> <span class="left-up">ニュース</span> <span class="right-up">NEW</span> <div class="low-title"> <h2>WordPressテーマ「SAN」の魅力</h2> </div> </a> </div> <div class="menu"> <a href="#"> <img style="vertical-align:bottom" src="img/fafa-2-520x300.jpg" class="img-100"> <span class="left-up">カスタマイズカテゴリー</span> <span class="right-up">NEW</span> <div class="low-title"> <h2>SANGOのショートコードでできること</h2> </div> </a> </div> <div class="menu"> <a href="#"> <img style="vertical-align:bottom" src="img/fafd-1-520x300.jpg" class="img-100"> <span class="left-up">見出し</span> <div class="title"> <h2>記事を華やかに!約40種類の見出しデザ<br class="res-br">イン</h2> </div> </a> </div> <div class="menu"> <a href="#"> <img style="vertical-align:bottom" src="img/faf-2-520x300.jpg" class="img-100"> <span class="left-up">デザイン</span> <div class="title"> <h2>CSSだけで作られたハンバーガーメニュ<br class="res-br">ー&スライダーメニュー<br class="res-br"></h2> </div> </a> </div> <div class="menu"> <a href="#"> <img style="vertical-align:bottom" src="img/OVFPXK1-520x300.jpg" class="img-100"> <span class="left-up">デザイン</span> <div class="title"> <h2>関連記事のパターンを3記事+から選<br class="res-br">べるように</h2> </div> </a> </div> <div class="menu"> <a href="#"> <img style="vertical-align:bottom" src="img/fa-1-520x300.jpg" class="img-100"> <span class="left-up">デザイン</span> <div class="title"> <h2>40種類以上のボタンを用意</h2> </div> </a> </div> <div class="menu"> <a href="#"> <img style="vertical-align:bottom" src="img/faf-1-520x300.jpg" class="img-100"> <span class="left-up">ニュース</span> <div class="title"> <h2>SANGOで約30種類のボックスを挿入し<br class="res-br">よう</h2> </div> </a> </div> <div class="menu"> <a href="#"> <img style="vertical-align:bottom" src="img/f-520x300.jpg" class="img-100"> <span class="left-up">リスト</span> <div class="title"> <h2>SANGOの箇条書き（20種類以上）と引<br class="res-br">用のデザイン</h2> </div> </a> </div> </div>
.all-menu { display: none; } .all-menu.is-show { display:block; clear: both; margin-top: 90px; width: 732px; display: flex; flex-wrap: wrap; justify-content: space-between; }
$("#left-nav").click(function () { $(this).addClass("change-bg"); if ($('#right-nav').hasClass('change-bg')) { $('#right-nav').removeClass('change-bg'); } }); $("#right-nav").click(function () { $(this).addClass("change-bg"); if ($('#left-nav').hasClass('change-bg')) { $('#left-nav').removeClass('change-bg'); } }); $(".tabtab").click(function(){ $('.is-show').removeClass('is-show'); const index = $('this').index(); $('.all-menu').eq(index).addClass('is-show'); });
回答1件
0
ベストアンサー
一つのHTML要素の中でclass属性を2回指定はできません
HTML
1<div id="left-nav" class="change-bg" class="tabtab"> 2↓↓↓ 3<div id="left-nav" class="change-bg tabtab">
jsはせっかくなのでtabtabで調整
javascript
1$(function(){ 2 $(".tabtab").on('click',function () { 3 $(".tabtab").removeClass("change-bg"); 4 $(this).addClass("change-bg"); 5 $('.is-show').removeClass('is-show'); 6 const index = $(this).index(); 7 $('.all-menu').eq(index).addClass('is-show'); 8 }); 9}); 10 11
投稿2019/09/24 10:21
総合スコア116661
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/09/24 10:43