MENU

タブメニュー

タブメニューは、タブ選択によって 表示するコンテンツを切り替える機能を持ったメニューです。

Heartタブを選択すると、Heartのアルバムの情報が表示れます。
(ちなみに初期状態はHeartタブが選択する選択された状態となっています)

ここで、Nightwishタブを選択すると、以下のようにNightwishのアルバムの情報
に表示が切り替わります。

それでは、HTML,CSS,JS の記述を見てみましょうか?

1)HTML

<section class="info" id="info-section">
    <div class="info__container">
      <h2 class="info__section section__title">お知らせ</h2>
      <div class="info__box ">
        <p class="info__title active">Heart</p>
        <p class="info__title">Nightwish</p>
      </div>
      <!--  タブがHeartの時-->
      <div class="info__items active">
        <div class="info__item">
          <img class="info__img" src="./images/LITTLEQUEEN.jpg" alt="リトルクイーン">
          <div class="info__body">
            <time>1977.12.24</time>
            <p class="info__text">Heartのリトル・クイーンのリリース年度は1977年です。</p>
          </div>
        </div>
        <div class="info__item">
          <img class="info__img" src="./images/BEBE.jpg" alt="ベベ・レ・ストレンジ">
          <div class="info__body">
            <time>1980.12.24</time>
            <p class="info__text">Heartのベベ・レ・ストレンジのリリース年度は1980年です</p>
          </div>
        </div>
      </div>
      <!--  タブがNightwishの時-->
      <div class="info__items">
        <div class="info__item">
          <img class="info__img" src="./images/IMG_0032.jpg" alt="オーシャンボーン">
          <div class="info__body">
            <time>1998.12.24</time>
            <p class="info__text">Nightwishのオーシャンボーンのリリース年度は1998年です。</p>
          </div>
        </div>
        <div class="info__item">
          <img class="info__img" src="./images/IMG_0034.jpg" alt="ウィシュマスター">
          <div class="info__body">
            <time>2000.12.24</time>
            <p class="info__text">Nightwishのウィシュマスターのリリース年度は2000年です。</p>
          </div>
        </div>
      </div>
    </div>
  </section>

2)CSS

.section__title {
  text-align: center;
}
.info__container {
  max-width: 1160px;
  margin: 0 auto;
}
.info__section {
  padding-top: 60px;
}
.info__box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-bottom: 54px;
}
.info__title {
  padding-right: 28px;
  padding-left: 28px;
}
.info__title.active {
  background-color: aqua;
}
.info__items.active {
  display: flex;
  flex-direction: row;
}
.info__items {
  display: none;
}
.info__item {
  display: flex;
  flex-direction: row;
  width: 50%;
  padding-left: 20px;
}
.info__img {
  width: 100px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 10px;
}
.info__body {
  padding-left: 30px;
  padding-right: 107px;
  padding-top: 5px;
}
.info__body time {
  font-size: 14px;
  line-height: 2.285;
}
.info__body p {
  line-height: 2;
}

3)JS

$('.info__title').on('click',function() {
	var index = $('.info__title').index(this);
	$('.info__title,.info__items').removeClass('active');
	$(this).addClass('active');
	$('.info__items').eq(index).addClass('active');
});

それでは、上記の処理の流れについて説明します。
1)タブ(.info__title)がクリックされる
2)クリックされたタブが、何番目かの情報を変数indexに格納する
3)変更前のタブのクラスからactiveクラスを削除する
4)indexに格納された何番目かの情報をもとに、それに該当するクラスにactiveクラスを追加する  

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

目次