マーカーネット株式会社

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

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

関連記事

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

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

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

jqueryを利用した、facebookのアルバムから写真一覧の取得について

jqueryを利用した、facebookのアルバムから写真一覧の取得について

jQueryを利用して、 facebookの指定のアルバムから写真の一覧を取得する方法を紹介します。 ※ まず、facebookからアルバム一覧します。 var name = “markernet”; …

ブロック要素の高さを揃えるのに便利なjqueryライブラリ【jquery.tile.js】

ブロック要素の高さを揃えるのに便利なjqueryライブラリ【jquery.tile.js】

ブロック要素にfloatをかけて回り込ませる、 というのはコーディングをする際によく使う手法ですよね。 「ブロック要素の高さを揃えたい」と思う事はありませんか? そんな時、私がよく使う便利なjquer …

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

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

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

ウェブ上学習プログラム「Dash」!ブラウザでWEB制作(HTML, CSS, JavaScript)の基礎を学べ

ウェブ上学習プログラム「Dash」!ブラウザでWEB制作(HTML, CSS, JavaScript)の基礎を学べ

この「Dash」と呼ばれるプログラムはGeneral Assemblyが起業家などを育てる教育分野に転身したのをきっかけにもともと自社内の教育ツールとして開発されたものだったらしいのですが、評判が良か …