マーカーネット株式会社

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

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

関連記事

レスポンシブにも対応!行ごとのブロック要素の高さを自動で合わせる方法。

レスポンシブにも対応!行ごとのブロック要素の高さを自動で合わせる方法。

ブロック要素の高さを揃えるJavaScriptはいくつかあります。 その中でも行ごとの高さを変えたい場合に便利な「fixHeight.js」をご紹介します。 「fixHeight.js」の設置方法 ま …

面白い動きや便利な機能をJSで実装! その1:簡単にグラフを作成する方法!

折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなどを 作成することができる「Chart.js」をご紹介致します。 今回は一番汎用性の高いと思われる折れ線グラフを作成してみたいと思います。 表示の瞬 …

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

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

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

WYSIWYGエディタCKEditor + KCFinderで画像の保存先を動的に指定する方法。

WYSIWYGエディタCKEditor + KCFinderで画像の保存先を動的に指定する方法。

ブログの記事の編集などにWYSIWYGエディタCKEditor + KCFinderを導入しているサイトでログインするユーザごとに画像のアップロード先を切り替えたい状況がございます。 その方法を紹介し …

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

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