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

## 完成イメージ

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

![ezgif.com-optimize.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436363/0178780d-5b0d-b185-94e4-c24e7e5054c9.gif)


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

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

```html: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;
}
```

```js: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タグ`をクリックしたらクリックイベントを発生させる

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

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

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

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

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

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

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

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

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

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

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


```html
<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>
```

```javascript
$(".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クラス以外は非表示になってる。という仕組みになってます。

```css:index.css
.tabContents {
    display: none;
}
.tabContents.active {
    display: block;
}
```

```javascript: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クラスを削除するだけ

```javascript
$(".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'); //追加
}
```

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