フラットなタブを実装するjQueryコードとCSS

フラットなデザインのタブを実装するjQueryコードとCSSを紹介します。
例によって簡単にタブを作れるjQueryライブラリがありますので、めんどうな方はそちらを使用するとラクチンだと思います。

jQueryライブラリ
jQueryUI

jQueryコード

仮にjquery.tab.jsと名前をつけて保存

$(function(){
	$('.tabbox:first').show();
	$('#tab li:first').addClass('active');
	$('#tab li').click(function() {
		$('#tab li').removeClass('active');
		$(this).addClass('active');
		$('.tabbox').hide();
		$($(this).find('a').attr('href')).fadeIn();
		return false;
	});
});

2行目[.tabbox] 実際に切り替わるコンテンツ部分
3,4,5行目[#tab li] クリックするタブ

大体のコード記述の流れはこんな感じです。

  1. jquery発動のための準備
  2. [.tabbox]要素ひとつめを表示
  3. [#tab li]要素ひとつめにクラス[active]が付加
  4. タブがクリックされた際の動作を指定
  5. [#tab li]要素ひとつめからクラス[active]が取り除かれる
  6. クリックされた[#tab li]要素にクラス[active]が付加
  7. [.tabbox]要素を非表示
  8. クリックした[#tab li]要素から[a]要素を探して中身を取得しフェードインで表示

HTML

head内

<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.tab.js"></script>

body内

<ul id="tab">
<li class="selected"><a href="#tab1">タブ1</a></li>
<li><a href="#tab2">タブ2</a></li>
<li><a href="#tab3">タブ3</a></li>
<li><a href="#tab4">タブ4</a></li>
<li><a href="#tab5">タブ5</a></li>
</ul>
<div id="detail">
<div id="tab1" class="tabbox">
<p>タブ1のコンテンツ。</p>
<!-- #tab1 --></div>
<div id="tab2" class="tabbox">
<p>タブ2のコンテンツ。</p>
<!-- #tab2 --></div>
<div id="tab3" class="tabbox">
<p>タブ3のコンテンツ。</p>
<!-- #tab3 --></div>
<div id="tab4" class="tabbox">
<p>タブ4のコンテンツ。</p>
<!-- #tab4 --></div>
<div id="tab5" class="tabbox">
<p>タブ5のコンテンツ。</p>
<!-- #tab5 --></div>
<!-- #detail --></div>

CSS

ul#tab {
	zoom: 1;
	background: #c9c3c4;
	border-bottom: 3px solid #c81528;
	list-style: none;
	margin: 0 auto;
	padding: 0;
}
ul#tab:after { content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden; }
ul#tab li {
	float: left;
	text-align: center;
}
ul#tab li:last-child {
	background: none;
}
ul#tab li a {
	display: block;
	width: 138px;
	padding: 8px 0;
	text-decoration: none;
	color: #222;
}
ul#tab li a:hover {
	background: #c95560;
	color: #fff;
}
ul#tab li.active,
ul#tab li.active a,
ul#tab li.active a:hover {
	background: #c81528;
	color: #fff;
}
#detail {
	clear: both;
	overflow: hidden;
	background: #f7f7f7;
	width: 650px;
	height: 200px;
	padding: 20px;
}
.tabbox {
	display: none;
}

サンプルデモ

フラットなタブを実装するjQueryコードとCSS

6 件のコメント

  • いつも拝見させて頂いております。

    この記事のタブは実装できたのですが、タブ毎に外部htmlを表示させたいのですが上手くいきません。。

    Ajaxを使えば上手くいきそうなんですが、ご教示頂けないでしょうか?

    よろしくお願い致します。

    • コメントありがとうございます。
      返信遅くなりましてごめんなさい。

      ajaxで外部HTMLを表示する場合、クロスドメインの問題が出てくるので「Cross-Domain-Ajaxプラグイン」などのプラグインを使用することになるかと思います。
      iframeで呼び出すのが一番手っ取り早くて簡単かと思いますけどいかがでしょうか?

  • いつも拝見させていただいております。
    今後機会がありましたら、会社HP制作案件等で使わせていただきたいのですが、使用可能でしょうか?

    • コメントありがとうございます。
      何も問題ありません。ぜひご活用ください。
      お役に立てたら幸いです。

  • コメントを残す