こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

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

下のようにタブが3つあり、表示する内容は5項目あるとします。
Aタブをクリックした時は2・3・4、Bタブをクリックした時は1・5・3、
Cタブをクリックした時は1・3・4を表示させたいのですが、よい方法はありますか?

シンプルに、各タブ下に表示する内容をブロック要素で囲んで、display:block noneで切り替えを考えたのですが、3のデータなどはソース上3つ書かなければいけないので却下しました・・・。

どなたかお助けください。

[Aタブ][Bタブ][Cタブ]




投稿日時 - 2019-09-13 21:04:32

QNo.9656447

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.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でクリックされたときに表示する要素番号を指定しています。

もし表示順序も制御したいのであればさらに手を加える必要があります。「グリッドレイアウト」で調べていただければ何となく道筋が見えるかと思います。

投稿日時 - 2019-09-13 22:19:29

ANo.1

>ソース上3つ書かなければいけないので却下しました

それがHTMLです。
嫌ならphpで書いたら良いかと思います。

投稿日時 - 2019-09-13 21:22:22

あなたにオススメの質問