完成イメージ
画面小さくってごめんなさい...
コードはこんな感じになりました
余計なコードがあると逆に参考にしにくいと思うので、できるだけ最小限載せます。
すごく簡素なデザインになってます。
index.html
<ulclass="tab"><liclass="active-link"><ahref="#tab1">tab1</a></li><li><ahref="#tab2">tab2</a></li><li><ahref="#tab3">tab3</a></li></ul><article><sectionclass="tabContents active"id="tab1"><p>タブ１が表示されているよ</p></section><sectionclass="tabContents"id="tab2"><p>タブ２が表示されてるよ</p></section><sectionclass="tabContents"id="tab3"><p>タブ3が表示されているよ</p></section></article>css.index.css
.tab{display:flex;background:skyblue;}.tabli{list-style:none;margin:016px;}.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");vartabContents=$(this).attr("href");$(tabContents).addClass("active").siblings(".active").removeClass("active");returnfalse;});});登場メソッドの紹介
| メソッド名 | 効果 |
|---|---|
| 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属性。
<ulclass="tab"><liclass="active-link"><ahref="#tab1">tab1</a></li><!-- .tab配下のaタグのhref属性 --><li><ahref="#tab2">tab2</a></li><li><ahref="#tab3">tab3</a></li></ul>$(".tab a").click(function(){$(this).parent().addClass('active-link').siblings('.active-link').removeClass('active-link');vartabContents=$(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');vartabContents=$(this).attr("href");$(tabContents).addClass('active')//追加}- あとはさっきまで付いていたactiveクラスを削除するだけ
$(".tab a").click(function(){$(this).parent().addClass('active-link').siblings('.active-link').removeClass('active-link');vartabContents=$(this).attr("href");$(tabContents).addClass('active').siblings('.active')//追加.removeClass('active');//追加}完成しました。どこか間違えてたりしたら指摘よろしくお願いします！