아무래도 7note입니다. 탭 등을 클릭하여 내용을 나누는 만드는 방법.

특히 더 이상 설명도 없기 때문에 소스를 부디.

출처

※jQuery를 사용하고 있습니다. jQuery는 무엇입니까? ? ? 그렇다면 여기

index.html

<ul class="tab">
  <li class="carrent" rel="item1">メニュー１</li>  <!-- 初期で選択状態のものにクラス「carrent」 -->
  <li rel="item2">メニュー２</li>    <!--rel属性を作り、任意の名前を設定 -->
</ul>
<div class="items">
  <div class="detail item1"><!-- 上のタブのrelと連動するようにクラス名を付ける（例：item1） -->
    <p>ここに1つ目のアイテムの内容を入れる</p>
    <p>ここに1つ目のアイテムの内容を入れる</p>
    <p>ここに1つ目のアイテムの内容を入れる</p>
  </div>
  <div class="detail item2"><!-- 同様にクラス名を付ける -->
    <p>ここに2つ目のアイテムの内容を入れる</p>
    <p>ここに2つ目のアイテムの内容を入れる</p>
    <p>ここに2つ目のアイテムの内容を入れる</p>
    <p>ここに2つ目のアイテムの内容を入れる</p>
  </div>
</div>

style.css

.tab {
  width: 300px;  /* 横幅を300pxに指定 */
  display: flex; /* タブを横並びの配置にする */
}

.tab li {
  color: #aaa;             /* 文字色をグレーに（選択されていない方の色） */
  font-size: 16px;         /* 適当な文字サイズを入力 */
  text-align: center;      /* 文字を中央揃えにする */
  width: 50%;              /* タブが2つなので半分ずつするため50%を指定 */
  border: 1px solid #000;  /* 1pxの枠線を作成 */
  padding: 5px 10px;       /* 余白を指定 */
  cursor: pointer;         /* マウスカーソルが乗った時👆の形にする */
}

.tab li.carrent {
  color: #fff;             /* 選択されているときは文字色を白 */
  font-weight: bold;       /* 選択されているときは太文字 */
  background: #777;        /* 選択されているときは背景色をグレー */
}

.items .detail {
  font-size: 14px;         /* 文字サイズを14pxに指定 */
  width: 300px;            /* 横幅を300pxに指定 */
  color: #fff;             /* 文字色を白に指定 */
  background: #000;        /* 背景色を黒に指定 */
  box-sizing: border-box;  /* 余白の計算を簡単にする */
  padding: 10px 20px;      /* 余白を指定 */
  display: none;           /* ページ読み込み時は非表示 */
}

script.js

$('.item1').show();                      // 初期で見せる箇所を表示
$('.tab li').on('click',function () {    // どれかのタブがクリックされた時

  /* タブの処理 */
  $('.tab li').removeClass('carrent'); // タブについているクラス「carrent」を削除
  $(this).addClass('carrent');         // クリックしたタブを選択状態にするためクラス「carrent」を追加

  /* itemの処理 */
  $('.detail').hide();                 // 一度詳細を全ての「.detail」を非表示にする
  var targ = $(this).attr('rel');      // クリックしたタブのrel属性の値を取得
  $('.' + targ).fadeIn();              // 取得したrel情報と同じクラスをもつitemを表示

});

해설

이번의 사양은 탭과 표시 내용을 분리해 작성했으므로, 떨어진 장소나 사이드 바에 메뉴를 배치하고 싶은 경우에서도 이용이 가능합니다.

「탭쪽에 rel 속성」, 「요소쪽에 클래스명」을 각각 같은 이름의 것을 설정해 묶어 두는 것으로, 표시할 수 있습니다.

클래스나 표시의 전환은 심플한 구조로, 한 번 전부 비표시(클래스 삭제)하고 나서, 임의의 것만 표시(클래스를 부여)하는 것으로 전환 처리를 행하고 있습니다.

CSS는 거의 체재를 정돈할 뿐이므로 이번에는 별로 해설할 정도의 포인트는 없습니다.

요약

외형이 탭이 아니어도 사용할 수 있는 방법이므로, 여러가지 곳에 응용할 수 있을까 생각합니다.

여분의 div 요소를 줄이고 싶었기 때문에 2 개소에 width:300px; 게다가.
디자인에 맞게 수정하여 사용하십시오.

어머니!

~ Qiita에서 매일 게시 중!! ~
【초보자용】HTML・CSS의 조금 테크 모임