マーカーネット株式会社

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

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

関連記事

面白い動きや便利な機能をJSで実装! その5:ちょっと変わったマウスオーバーの応用編

javascript(jquery)でマウスオーバー時に変わった動きを付けたいと思います。 面白い動きや便利な機能をJSで実装! その4:ちょっと変わったマウスオーバーを実装してみました。の続きになり …

jQueryを使ってみよう【開閉式メニューを作る編】

html・CSSでのマークアップは何となく分かるけどjQueryはちょっと分からないという方、 今からjQueryを使ってみようと思っている方必見。 jQueryの便利な使い方をご紹介します。 jQu …

面白い動きや便利な機能をJSで実装! その3:一目で印象に残るアニメーション背景を作成!

web制作をされている方ならば、サイトを訪れてくれた人を少しでも長く引き留めたいと思われると思います。 一体どうやって見てくれる人の興味をひけるのか。色々な方法がありますが、その一つとして面白い動きを …

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

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

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

jQueryを使ってみよう【親要素の大きさに合わせて画像をリサイズできるjQueryプラグイン「imgLiquid」】

html・CSSでのマークアップは何となく分かるけどjQueryはちょっと分からないという方、 今からjQueryを使ってみようと思っている方必見。 今回は便利なjQueryプラグイン「imgLiqu …