[jQuery]タブバー実装をする

完成イメージ

画面小さくってごめんなさい...

コードはこんな感じになりました

余計なコードがあると逆に参考にしにくいと思うので、できるだけ最小限載せます。
すごく簡素なデザインになってます。

index.html

<ul class="tab">
    <li class="active-link"><a href="#tab1">tab1</a></li>
    <li><a href="#tab2">tab2</a></li>
    <li><a href="#tab3">tab3</a></li>
</ul>
<article>
    <section class="tabContents active" id="tab1">
        <p>タブ１が表示されているよ</p>
    </section>
    <section class="tabContents" id="tab2">
        <p>タブ２が表示されてるよ</p>
    </section>
    <section class="tabContents" id="tab3">
        <p>タブ3が表示されているよ</p>
    </section>
</article>

css.index.css

.tab {
	display: flex;
	background: skyblue;
}
.tab li {
	list-style: none;
	margin: 0 16px;
}
.tab .active-link {
    font-weight: bold;
    background-color: red;
}
.tabContents {
	display: none;
}
.tabContents.active {
	display: block;
}

index.js

$(function() {
	$(".tab a").click(function() {
		$(this).parent()
		       .addClass("active-link")
		       .siblings(".active-link")
		       .removeClass("active-link");
		var tabContents = $(this).attr("href");
		$(tabContents).addClass("active")
			      .siblings(".active")
			      .removeClass("active");
		return false;
	});
});

登場メソッドの紹介

メソッド名	効果
click()	クリックしたらイベント発生させるよ
parent()	親要素を取得するよ
addClass()	指定したクラスを追加するよ
removeClass()	指定したクラスを削除するよ
siblings()	指定した兄弟要素とってくるよ
sttr()	指定した属性を取得できるよ

すごくざっくりで失礼。

なにしてるか解説していく

• tabの子要素であるaタグをクリックしたらクリックイベントを発生させる

$(".tab a").click(function() {
  //クリックしたらしてほしいこと書く
}

• クリックしたら.tab aの親要素（ここではliタグになる）を取得

$(".tab a").click(function() {
  $(this).parent() //追加
}

• さっき取得した親要素のliにactiveというクラスを追加する

$(".tab a").click(function() {
  $(this).parent()
         .addClass('active-link') //追加
}

• siblingsは指定した兄弟要素をとる。ここでは、liにactiveというクラスが付与されている要素を取得してる。

$(".tab a").click(function() {
  $(this).parent()
         .addClass('active-link')
         .siblings('.active-link') //追加
}

• さっき指定して取得した、あいつを消している

$(".tab a").click(function() {
  $(this).parent()
         .addClass('active-link')
         .siblings('.active-link')
         .removeClass('active-link'); //追加
}

ここまででリンク要素に対しての処理は終わり。これでクリックしたリンクが目立つようになります。
次は表示されるコンテンツに対しての処理を書いていきます。

• href属性を変数tabContentsに入れている。attr()は属性に対していろいろ操作できる優れものです。今回はthisのhref属性を指定しているので、.tab aのhref属性。

<ul class="tab">
    <li class="active-link"><a href="#tab1">tab1</a></li> <!-- .tab配下のaタグのhref属性 -->
    <li><a href="#tab2">tab2</a></li>
    <li><a href="#tab3">tab3</a></li>
</ul>

$(".tab a").click(function() {
  $(this).parent()
         .addClass('active-link')
         .siblings('.active-link')
         .removeClass('active-link');
  var tabContents = $(this).attr("href"); //追加
}

これからは、先ほど取得したhref属性を代入したtabContentsに対していろいろ操作していく。

• まずはtabContentsにactiveクラスを追加する

ちなみにcssでactiveのスタイルをdisplay: block,'tab-contents'にはdisplay: noneを指定しているので、activeクラス以外は非表示になってる。という仕組みになってます。

index.css

.tabContents {
    display: none;
}
.tabContents.active {
    display: block;
}

index.js

$(".tab a").click(function() {
  $(this).parent()
         .addClass('active-link')
         .siblings('.active-link')
         .removeClass('active-link');
  var tabContents = $(this).attr("href");
  $(tabContents).addClass('active') //追加
}

• あとはさっきまで付いていたactiveクラスを削除するだけ

$(".tab a").click(function() {
  $(this).parent()
         .addClass('active-link')
         .siblings('.active-link')
         .removeClass('active-link');
  var tabContents = $(this).attr("href");
  $(tabContents).addClass('active')
                .siblings('.active') //追加
                .removeClass('active'); //追加
}

完成しました。どこか間違えてたりしたら指摘よろしくお願いします！