マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

javascript(jquery)

jQueryでタブを作ってみた

投稿日:2014年9月12日 更新日:

今回はjQueryでタブを作ってみました。
タブは皆さんご存知の通りよくあるタブです!

Webサイトのページ内でコンテンツ要素が大量にある場合
そのまま表示させるとページが縦長になり
ブラウザ上で縦スクロールをしなければ
ページ下部のコンテンツを見る事は出来ません。

そんな時タブで表示・非表示を切り替えると
ページの縦幅が抑えられスッキリとした印象になり、
ユーザビリティの向上にも繋がると思います。

demo

タブボックス0コンテンツ

タブボックス0コンテンツ

タブボックス0コンテンツ

ソース例

html

<div id=”tab-area”>
<ul>
<li id=”tab-btn0″><a href=”#tab-box0″>タブボックス0</a></li>
<li id=”tab-btn1″><a href=”#tab-box1″>タブボックス1</a></li>
<li id=”tab-btn2″><a href=”#tab-box2″>タブボックス2</a></li>
</ul>
<div id=”tab-box0″>
<p>タブボックス0コンテンツ</p>
<p>タブボックス0コンテンツ</p>
<p>タブボックス0コンテンツ</p>
</div>
<div id=”tab-box1″>
<p>タブボックス1コンテンツ</p>
<p>タブボックス1コンテンツ</p>
<p>タブボックス1コンテンツ</p>
</div>
<div id=”tab-box2″>
<p>タブボックス2コンテンツ</p>
<p>タブボックス2コンテンツ</p>
<p>タブボックス2コンテンツ</p>
</div>
</div>

css

#tab-area {
width:100%;
border:1px solid rgba(51,51,51,1);
margin-bottom:20px;
}
#tab-area ul {
display:table;
width:100%;
}
#tab-area ul li {
display:table-cell;
text-align:center;
}
#tab-area ul li a {
display:block;
text-decoration:none;
background-color:rgba(51,51,51,.5);
color:rgba(255,255,255,1);
padding:0.5em 0;
}
#tab-area ul li a:hover,
#tab-area ul li.current a {
background-color:rgba(51,51,51,1);
}

javascript

jQuery(function($){
function TabArea (TabBtn,TabLink,TabBox) {
$(‘#tab-btn0’).addClass(‘current’);
$(‘#tab-area > div:not(#tab-box0)’).hide();

$(TabLink).click(function(event){
$(‘#tab-area div[id^=tab-box]’).hide();
$(TabBox).fadeIn();
event.preventDefault();
$(TabBtn).addClass(‘current’);
$(‘#tab-area ul li:not(‘+TabBtn+’)’).removeClass(‘current’);
})
}
TabArea(‘#tab-btn0′,’#tab-area a[href=#tab-box0]’,’#tab-box0′);
TabArea(‘#tab-btn1′,’#tab-area a[href=#tab-box1]’,’#tab-box1′);
TabArea(‘#tab-btn2′,’#tab-area a[href=#tab-box2]’,’#tab-box2′);
})

とても簡単に作れますね!
カスタマイズも簡単に出来ますので
興味のある方は試してみて下さい。

-javascript(jquery)

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【2014年のWEBデザイン!】流行するカラー&廃りそうなスタイル

【2014年のWEBデザイン!】流行するカラー&廃りそうなスタイル

2013年も気が付けば残り1週間。早いものですね~(しみじみ) WEBの業界は流行り廃りが激しいもので、 デザインに限って見ても、この1年間でもさまざまな動きがありましたね。 2014年、WEBデザイ …

PCサイトとスマートフォンサイトを振り分けるjQueryライブラリ<Pc2Sp.js>をHTML4で利用する方法。

PCサイトとスマートフォンサイトを切り替えたい場合、 「Pc2Sp.js」というjQueryライブラリを利用すると実装できます。 このライブラリの紹介はネット上でたくさん見つかると 思いますので、今回 …

超簡単!【CSS3】ロールオーバー効果

超簡単!【jQuery】ロールオーバー効果 こちらではjqueryで簡単にロールオーバーをかける方法をご紹介しました。実はCSS3でも全く同じ効果を再現できるので、今回はCSS3でロールオーバー効果を …

レスポンシブにも対応!③ フリックスライダーを作成してみました。

レスポンシブにも対応!③ フリックスライダーを作成してみました。

今回はレスポンシブに対応できるスライドショーを作成してみたいと思います。 ただ、レスポンシブに対応しているだけでなく、 スマホに便利なフリックも可能なものをご紹介致します。 前回までの関連記事です。 …

【jQuery】 $(this)の親要素、子要素、隣接要素を指定する

【jQuery】 $(this)の親要素、子要素、隣接要素を指定する

jQueryでイベントが発生した要素を指定する$(this)。 jQueryを初めて使った頃は$(this)ってなんだ!? なんで普通に<li>なら$(“li”)じゃだめなの~!? なんて …