締切済み

タブで内容を切り替えたいのですが

2019/09/13 21:04

下のようにタブが３つあり、表示する内容は５項目あるとします。 Aタブをクリックした時は２・３・４、Bタブをクリックした時は１・５・３、 Cタブをクリックした時は１・３・４を表示させたいのですが、よい方法はありますか？シンプルに、各タブ下に表示する内容をブロック要素で囲んで、display:block noneで切り替えを考えたのですが、３のデータなどはソース上３つ書かなければいけないので却下しました・・・。どなたかお助けください。 [Aタブ][Bタブ][Cタブ] １２３４５

yu283574
お礼率8% (62/698)

CSS
回答数2
ありがとう数0

みんなの回答 （2）
専門家の回答

みんなの回答

Proof4
ベストアンサー率78% (151/192)

2019/09/13 22:19 回答No.2

タブの内容を重複して書かなくとも実現可能です。下記に実装例を示します。 CSSのみで実装するのはかなりテクニカルで煩雑なものとなるため、JavaScriptを用いています。（CSSカテゴリでのご質問のため一応おことわりしておきます。） <!DOCTYPE html> <html> <head> 　<style> 　　ul{ list-style: none; } 　　li{ display: block; } 　　.hidden{ display: none; } 　</style> </head> <body> 　<ul id="tab_btn_wrap" data-default="2,3,4"> 　　<li class="tab_btn" data-display="2,3,4">Aタブ</li> 　　<li class="tab_btn" data-display="1,5,3">Bタブ</li> 　　<li class="tab_btn" data-display="1,3,4">Cタブ</li> 　</ul> 　<ul> 　　<li id="content_1" class="hidden">1</li> 　　<li id="content_2" class="hidden">2</li> 　　<li id="content_3" class="hidden">3</li> 　　<li id="content_4" class="hidden">4</li> 　　<li id="content_5" class="hidden">5</li> 　</ul> 　<script> 　　const content_num = 5; // 表示内容の数　　/** 　　 * 表示・非表示を切り替える関数　　 * @param {Number} n タブ内の表示要素の番号　　 * @param {Boolean} mode true->表示、false->非表示　　 */ 　　function display(n, mode){ 　　　const elem_cl = document.getElementById('content_' + n).classList; 　　　if(mode) elem_cl.remove('hidden'); 　　　else elem_cl.add('hidden'); 　　} 　　/* 初期状態のセット */ 　　const disp_default = document.getElementById('tab_btn_wrap').getAttribute('data-default').split(','); 　　for(i of disp_default){ 　　　display(i, true); 　　} 　　/* タブクリック時の動作 */ 　　const tab_btns = document.getElementsByClassName('tab_btn'); 　　for(btn of tab_btns){ 　　　btn.addEventListener('click', function(){ 　　　　const disp = this.getAttribute('data-display').split(','); 　　　　for(let i=1; i<=content_num; i++){ 　　　　　display(i, disp.indexOf(i + '') != -1); 　　　　} 　　　}); 　　} 　</script> </body> </html> ※OKWAVEの仕様上、インデントを全角スペースで表現しています。コピペの際はご注意ください。 #tab_btn_wrap要素のdata-defaultで初めに表示する要素番号を指定しています。同様に、各タブボタンのdata-displayでクリックされたときに表示する要素番号を指定しています。もし表示順序も制御したいのであればさらに手を加える必要があります。「グリッドレイアウト」で調べていただければ何となく道筋が見えるかと思います。

ログインすると、全ての回答が全文表示されます。