jQueryを使用してシンプルなタブインターフェースを実装する方法を説明します。以下に、HTML、CSS、およびjQueryのコードを使用した基本的な例を示します。この例では、複数のタブを切り替えることができ、各タブには異なるコンテンツが表示されます。
See the Pen
Untitled by とある (@web-design-seisaku)
on CodePen.
HTML
HTML構造は、タブのリストとそれに対応するコンテンツ領域を含めます。以下はその基本的な構造です
<div id="tabs">
<ul class="tab-links">
<li class="active"><a href="#tab1">タブ 1</a></li>
<li><a href="#tab2">タブ 2</a></li>
<li><a href="#tab3">タブ 3</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<p>タブ 1 の内容がここに入ります。</p>
</div>
<div id="tab2" class="tab">
<p>タブ 2 の内容がここに入ります。</p>
</div>
<div id="tab3" class="tab">
<p>タブ 3 の内容がここに入ります。</p>
</div>
</div>
</div>CSS
次に、タブの視覚的なスタイリングを行います。アクティブなタブを強調表示し、非アクティブなタブを普通に表示します
.tab-links a {
padding: 10px 15px;
display: inline-block;
background: #ccc;
color: #444;
}
.tab-links .active a {
background: #e9e9e9;
color: #000;
}
.tab-content .tab {
display: none;
padding: 20px;
border-top: none;
}
.tab-content .active {
display: block;
}jQuery
最後に、jQueryを使用してタブの切り替え機能を実装します。以下のスクリプトは、クリックされたタブに基づいて表示されるコンテンツを切り替えます
$(document).ready(function() {
$('.tab-links a').on('click', function(e) {
e.preventDefault();
var currentAttrValue = $(this).attr('href');
// タブの表示/非表示を切り替え
$('.tab-content .tab' + currentAttrValue).show().siblings().hide();
// アクティブなタブのクラスを切り替え
$(this).parent('li').addClass('active').siblings().removeClass('active');
});
});
このスクリプトは、タブリンクがクリックされたときに実行され、href属性に基づいて適切なタブコンテンツを表示します。また、アクティブなタブのスタイルを変更してユーザーに現在のタブを示します。
これで、jQueryを使用して基本的なタブ機能を持つインターフェースが完成しました。タブ間でスムーズに切り替えられ、各タブには独自のコンテンツが表示されます。このコードは基本的なものですので、さらにカスタマイズや機能拡張を加えることも可能です。
