Webページを作っているときに，画面が狭くて全ての情報を載せられない！！ってなったりしませんか？今回はメニューをクリックするとページ内で切り替わるタブをjQueryで実装していきます．jQueryではクリックに合わせてactiveクラスを追加したり消去したりするだけなので，そこまで難しくはないでしょう．
このタブを使用することで画面を有効活用でき，より洗練された美しいサイトに近づくと思います！それでは動作原理とコードを見ていきましょう．
動作原理
動作原理はスライドショーとほとんど同じです．1つ1つのタブをすべて重ね合わせます．最初は一番上のスライドと，それに対応するリストを表示させます．表示中のスライド以外は非表示にしておきます．別のリストがクリックされると，そのリストと対応するタブにactiveクラスが付与され表示されます．
構成ファイルは以下の通りです．
HTML
<header id="page-header" role="banner">
<div class="inner">
<h1>TamoTechBlog sample page</h1>
<div id="header-menu">
<ul>
<li href="#sample1"><span></span><a href="#">Sample1</a></li>
<li href="#sample2"><span></span><a href="#">Sample2</a></li>
<li href="#sample3"><span></span><a href="#">Sample3</a></li>
<li href="#sample4"><span></span><a href="#">Sample4</a></li>
<li href="#sample5"><span></span><a href="#">Sample5</a></li>
</ul>
</div>
</div>
<div id="tab">
<div id="sample1">
<section class="title">
<h1>Sample1</h1>
<p>これはSample1のタブになります．タイトルや文章，ボタンなども含めて消すことができます.</p>
<button><a href="#">Read More</a></button>
</section>
<img src="./img/cake.jpg" alt="" >
</div>
<div id="sample2">
<section class="title">
<h1>Sample2</h1>
<p>これはSample2のタブになります．タグ２をクリックするとページ内でビューが切り替わります．</p>
<button><a href="#">Read More</a></button>
</section>
<img src="./img/interior.jpg" alt="" >
</div>
<div id="sample3">
<section class="title">
<h1>Sample3</h1>
<p>これはSample3のタブになります．画像を縦に並べて説明文をそれぞれ書くより，ちょっとお洒落ですよね.</p>
<button><a href="#">Read More</a></button>
</section>
<img src="./img/desk.jpg" alt="" >
</div>
<div id="sample4">
<section class="title">
<h1>Sample4</h1>
<p>これはSample4のタブになります．これを使うことでスペースの無駄なく美しいデザインができます．</p>
<button><a href="#">Read More</a></button>
</section>
<img src="./img/lunch.jpg" alt="" >
</div>
<div id="sample5">
<section class="title">
<h1>Sample5</h1>
<p>これはSample5のタブになります．今回は急に切り替わりますが，スライドインやフェードインしてもいいかも．</p>
<button><a href="#">Read More</a></button>
</section>
<img src="./img/interior.jpg" alt="" >
</div>
</div>
</header>今回はヘッダーメニュー内にタブを作成しています．headerタグにはメニューリストとそれに対応するタブを子要素として持っています．タブにはそれぞれidを持っており，このidを使用してクラスを追加したり消去したりします．
SCSS（CSS）
header {
width: 100%;
height: 80px;
color: #1d1d1d;
background-color: #f5f5f5;
.inner {
box-sizing: border-box;
height: 100%;
width: 100%;
padding: 0px 40px;
display: flex;
align-items: center;
justify-content: space-between;
h1 {
font-size: 20px;
}
#header-menu {
height: 100%;
ul {
height: 100%;
display: flex;
list-style: none;
li {
padding: 0px 15px;
height: 100%;
display: flex;
align-items: center;
position: relative;
span {
content: "";
width: 0;
height: 0;
border: 20px solid transparent;
border-top: 20px solid #808080;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
z-index: 5;
display: none;
}
a {
text-decoration: none;
color: black;
font-size: 17px;
}
}
.active {
background-color: #808080;
a {
color: white;
}
span {
display: block;
}
}
}
}
}
#tab {
div {
display: none;
position: relative;
top: 0;
right: 0;
left: 0;
height: 40vh;
color: white;
.title {
position: absolute;
z-index: 5;
top: 50%;
transform: translateY(-50%);
left: 10%;
height: auto;
width: 30%;
display: inline-block;
text-align: center;
h1 {
margin-bottom: 20px;
}
p {
text-align: start;
line-height: 2em;
margin-bottom: 10px;
}
button {
padding: 10px;
background-color: transparent;
border: solid 1px white;
a {
text-decoration: none;
color: white;
font-size: 15px;
}
}
button:hover {
background-color: rgba($color: white, $alpha: 0.5);
border: solid 1px black;
a {
color: black;
}
}
}
img {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 40vh;
object-fit: cover;
}
}
.active {
display: block;
}
}
}細かいデザインも調整しているので少し長いですが，やっていることは以下の通りです．
- メニューリストを横に並べる
- liタグ中のspan要素を逆三角の形にし，三角の上辺とヘッダーの下側をそろえたあと非表示にする．
- ボタンが押された時のactiveクラスを設定する．背景と文字色を変更し非表示にした逆三角形を表示させる．
- 各タブにposition: relativeを設定し，その子要素のimgタグにposition: absoluteを設定する．
- 全てのタブを重ね合わせるようにpositionを設定し，すべてのタグを非表示にしておく．
- タブのactiveクラスを用意し，display: blockで再表示させるようにしておく
jQuery（main.js）
$(function(){
$('header').each(function(){
//メニュー内のリスト
var $menulist = $(this).find('#header-menu li');
//表示するタブ
var $tab = $(this).find('#tab');
//リストにクリックイベントを設定
$menulist.on('click',function(){
//すべてのリストのactiveクラスを消去
$menulist.removeClass('active');
//すべてタブ内のactiveクラスを消去
$tab.find('div').removeClass('active');
//クリックされたリストにのみactiveクラスを付与
$(this).addClass('active');
//クリックされたリストのhrefプロパティを取得し，
//それと同じidを持つタブにactiveクラスを追加
$tab.find($(this).attr('href')).addClass('active');
});
//初期タブの表示
$menulist.eq(0).trigger('click');
});
});jQueryではクリックされたリストとそれに対応するタブにactiveクラスを付与するだけです．付与する前に全てのactiveクラスを消去するのを忘れないようにしましょう．詳細はコード内部のコメントアウトを見てください．
この中でポイントとなるのは「.attr( ‘ href ‘ )」のメソッドです．これは引数に指定されたプロパティーを取得するメソッドになります．今回はクリックされたliのhrefプロパティーを取得しています．取得されたプロパティーは対応するタブと同じ文字列のため，そのタブにactiveクラスが追加されます．
今回はタブが急に切り替わりましたが，フェードイン，スライドインなどでタブを切り替えてみてもお洒落かもしれません．試してみてください．
サンプルページはこちらからも閲覧できます．
サンプルページのコードはこちらからダウンロードできます．
