2020.06.03
jQueryで簡単なタブを実装してみた
Vegas熱が再燃してきた今日この頃。やっぱりトリッキーな曲は聴いていて飽きないね。ライブ行きたいよー。
タブ作成の記事を見返したらゴミみたいな内容だったのでリライトします。。
簡単なタブを作成してみた
今回はタブを作成してみました。
機能としては、タブをクリックすると下のパネルも連動して切り替わるといった単純なものです。
よく使われているものなのでどういう処理をしているのか理解しておくと損はないと思います。
レイアウトは適当な感じなんで、適宜いい感じに装飾しちゃってください！
こんなの↓
実装している処理の内容はこんな感じです。
・タブにマウスホバー、マウスアウトで色が変化
・クリックしたタブの色が変化
・タブをクリックするとそのタブに応じた要素が表示される
とりあえずコードを載せます。最後にコードの内容について順を追って説明します。
HTML
<body>
<main></main>
<div class="tabWrap">
<ul class="tabs">
<li class="tab active">tab1</li>
<li class="tab">tab2</li>
<li class="tab">tab3</li>
<li class="tab">tab4</li>
<li class="tab">tab5</li>
<li class="tab">tab6</li>
</ul>
<ul class="tabPanels">
<li class="tabPanel active">
<p class="tabTxt">
tab1のパネルです。
</p>
</li>
<li class="tabPanel">
<p class="tabTxt">
tab2のパネルです。
</p>
</li>
<li class="tabPanel">
<p class="tabTxt">
tab3のパネルです。
</p>
</li>
<li class="tabPanel">
<p class="tabTxt">
tab4のパネルです。
</p>
</li>
<li class="tabPanel">
<p class="tabTxt">
tab5のパネルです。
</p>
</li>
<li class="tabPanel">
<p class="tabTxt">
tab6のパネルです。
</p>
</li>
</div>
<footer></footer>
</body>
CSS
/*=====blobal=====*/
body {
background-color: #e9e9e9;
}
/*=====main,footer=====*/
main,
footer {
background-color: #e9e9e9;
height: 200px;
min-width: 1000px;
}
/*=====tabs=====*/
.tabWrap {
width: 1000px;
margin: auto;
}
.tabWrap .tabs {
display: flex;
justify-content: center;
align-items: flex-end;
}
.tabs .tab {
background-color: #93cdd6;
color: #fff;
width: 200px;
height: 60px;
line-height: 60px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.tabs .tab:not(.active):hover {
background-color: #f79f9f;
color: #fff;
opacity: 0.8;
}
.tabs .tab.active {
background-color: #f79f9f;
}
/*=====tabPanels=====*/
.tabPanels .tabPanel {
background-color: #fff;
border-top: solid 10px #f79f9f;
height: 400px;
padding: 24px;
display: none;
}
.tabPanels .tabPanel.active {
display: block;
}
jQuery
$(function () {
/*変数の設定*/
const $tabs = $(".tabWrap .tabs"),
$tab = $tabs.find(".tab"),
$tabPanel = $(".tabPanel");
$tab.click(function() {
//アクティブタブのインデックス番号を取得
const $tabIndex = $tab.index(this),
//アクティブタブのインデックス番号をパネルに紐づけ
$activeTab = $tabPanel.eq($tabIndex);
//タブの処理
$tab.removeClass("active"),
$(this).addClass("active"),
//パネルの処理
$tabPanel.removeClass("active"),
$activeTab.addClass("active");
});
});
HTML構造について
HTML構造はかなり単純です。
タブとなるulの塊と、パネルとなるulの塊を用意します。
タブやパネルがulで構成されていますが、別にdivでもOK(セマンティックなマークアップになっていればOK)です。
アクティブではないパネルを非表示にする
ノンアクティブの場合は、display: none;で非表示にします。
アクティブの場合は、display: block;で表示させます。
この.activeの付け外しに必要な処理をJS側で実現させます。
ホバーの処理
CSSでホバーの処理を実装します。
JSでもホバー処理はできますが、CSSでできることはできるだけCSSにやらせましょう！ってどっかのQiita記事に書いてました！
:not(.active)はすでに.activeがついている要素には効かないよ！という意味です。
.activeはJS側でクリックされたとき、要素(タブ)に追加するセレクタです。(命名は別に.activeでなくても良いです)
なぜ今回アクティブな要素をホバー処理から除外したかというと、ホバー時、opacityでちょっと半透明にしたかったからです。
アクティブな要素にもopacityがあたってしまうと使う側としては結構紛らわしい気がするので。
.tabs .tab:not(.active):hover {
background-color: #f79f9f;
color: #fff;
opacity: 0.8;
}
クリックされた要素(タブ)のインデックス番号を特定する
index()で要素の順番を取得できます。index()に引数としてthisを渡してあげればクリックされた要素の特定ができるようになります。
const $tabIndex = $tab.index(this);
クリックされた要素のインデックス番号をパネルに紐づけ
ここではeqメソッドを使います。引数に先ほど定義した変数($tabIndex)を入れ、インデックス番号を取得します。
そのインデックス番号のtabPanelの要素を取得できるようになります。これで無事タブとパネルのインデックス番号を紐づけられました。
$activeTab = $tabPanel.eq($tabIndex);
セレクタに.activeを追加、除去
まず最初に要素についている.activeを一旦すべて除去します。
除去する理由は、アクティブ状態のタブが選択された状態から、更に他タブを選択すると色が変わったままになってしまうのを防ぐためです。
$tab.removeClass("active");
$tabPanel.removeClass("active");
クリックされた要素に.activeを追加する
タブ部分は$(this)でクリックされた要素を特定し、addClassで.activeを追加しています。
パネル部分も同様。
$(this).addClass("active");
$activeTab.addClass("active");