ウェブサイトやアプリケーションにおいて、コンテンツを整理し、ユーザーにフレンドリーなナビゲーションを提供するための一般的な方法として、タブ切り替え機能がよく利用されます。
この記事では、JavaScriptを用いてモダンなタブ切り替え機能を実装する方法を紹介します。HTMLとCSSを使った基本的なセットアップから始め、JavaScriptでの動的な挙動の追加までをカバーします。
タブ切り替えサンプル
こちらがタブ切り替えのサンプルです。
タブを押すとフェードして、コンテンツが切り替わります。
タブを増やしても、正常に動作する作りになっています。
See the Pen Untitled by kokusyo (@kokusyo) on CodePen.
ソース解説
HTMLの構造
クラス「.tabs」はタブを切り替えるボタン、「.tab-content」クラスは、表示されるコンテンツです。
「.active」クラスが付与されているタブが表示されます。
<!-- タブ切り替えのボタン -->
<div class="tabs">
<button class="tab-button active">タブ1</button>
<button class="tab-button">タブ2</button>
<button class="tab-button">タブ3</button>
</div>
<!-- 切り替え対象のタブ -->
<div class="tab-content">
<div class="content active">タブ1の内容です。</div>
<div class="content">タブ2の内容です。</div>
<div class="content">タブ3の内容です。</div>
</div>CSSによるスタイリング
タブ切り替え時のフェード処理は、「transition」プロパティを使用して実装しています。
「.active」クラスが付与されると、visibility: visible; opacity: 1;となり、コンテンツが表示されます。
.tabs {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
/* 各タブボタンのスタイリング */
.tab-button {
flex-grow: 1;
padding: 10px 20px;
cursor: pointer;
border: none;
background-color: #f0f0f0;
outline: none;
transition: background-color 0.3s;
border-bottom: 3px solid transparent;
}
.tab-button.active {
background-color: #fff;
border-bottom: 3px solid #007BFF;
}
.tab-content .content {
visibility: hidden;
opacity: 0;
transition: opacity 0.5s, visibility 0s linear 0.5s;
position: absolute;
/* コンテンツが重なるように配置 */
width: 100%;
border: 1px solid #ddd;
padding: 20px;
background-color: #fff;
}
.tab-content .content.active {
visibility: visible;
opacity: 1;
transition: opacity 0.5s;
}JavaScriptによるインタラクティブな動作
各タブボタンにクリックイベントリスナーを設定し、そのタブがクリックされたときに switchTab 関数を呼び出して、アクティブなタブとコンテンツを切り替えます。
const tabs = document.querySelectorAll('.tab-button');
const contents = document.querySelectorAll('.content');
for (const [index, tab] of tabs.entries()) {
tab.addEventListener('click', () => switchTab(index));
}
function switchTab(index) {
// タブのアクティブ状態を更新
for (const tab of tabs) {
tab.classList.remove('active');
}
tabs[index].classList.add('active');
// 一度全てのタブを非表示にする
for (const content of contents) {
content.classList.remove('active');
}
// 選択したタブのコンテンツを表示する
contents[index].classList.add('active');
}