jQueryで作るシンプルタブ

jQuery
スポンサーリンク

jQueryでタブは、かなりメジャーな処理の1つですが、作る度に調べていて結構時間の無駄だったので、現在の自分なりのタブ機能の実装コードをメモしておきます。

確認環境

  • jQuery1.7.2

コード

“`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>jQueryで作るシンプルタブ|サンプル</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<style type="text/css">
.tabmenu .active, .tabmenu a:hover { background-color: #c00; }
</style>
<body>
<ul class="tabmenu">
<li><a href="#tab01">タブ01</a></li>
<li><a href="#tab02">タブ02</a></li>
<li><a href="#tab03">タブ03</a></li>
</ul>

<div class="tabcontents" id="tab01">
<ul>
<li>中身01中身01中身01中身01中身01</li>
<li>中身01中身01中身01中身01中身01</li>
<li>中身01中身01中身01中身01中身01</li>
<li>中身01中身01中身01中身01中身01</li>
<li>中身01中身01中身01中身01中身01</li>
<li>中身01中身01中身01中身01中身01</li>
</ul>
<!– /tab01 –></div>

<div class="tabcontents" id="tab02">
<ul>
<li>中身02中身02中身02中身02中身02</li>
<li>中身02中身02中身02中身02中身02</li>
<li>中身02中身02中身02中身02中身02</li>
<li>中身02中身02中身02中身02中身02</li>
<li>中身02中身02中身02中身02中身02</li>
<li>中身02中身02中身02中身02中身02</li>
</ul>
<!– /tab02 –></div>

<div class="tabcontents" id="tab03">
<ul>
<li>中身03中身03中身03中身03中身03</li>
<li>中身03中身03中身03中身03中身03</li>
<li>中身03中身03中身03中身03中身03</li>
<li>中身03中身03中身03中身03中身03</li>
<li>中身03中身03中身03中身03中身03</li>
<li>中身03中身03中身03中身03中身03</li>
</ul>
<!– /tab03 –></div>

<script type="text/javascript">
//一旦全てのコンテンツを消す
$('.tabcontents').hide();

//初期値はタブ1なので、タブ1だけ表示
$('#tab01').show();

//タブ切り替え
//タブメニューのaタグをクリックしたら
$('.tabmenu li a').on('click',function(e){
//クリックしたaタグは、リンクとして反応させない
e.preventDefault()
//クリック自身のhrefの内容を取得する
//長ったらしいので、変数に入れています
var tabmenu_name = $(this).attr('href');
//一旦コンテンツ部分を全部非表示に
$('.tabcontents').hide();
//クリックに対応するコンテンツを表示
$(tabmenu_name).fadeIn();
//タブの色を変える処理。一旦全てのaタグにあるactiveクラスを削除
$('.tabmenu li a').removeClass('active');
//自身の(クリックしたタグのaタグにactiveクラスを追加
$(this).addClass('active');
});
</script>
</body>
</html>“`

簡単に解説

  • クリックしたaタグを反応させないために、e.preventDefault()を追加。参考記事
  • ユーザビリティを考慮して、できるだけjavascriptだけで制御するようにする。とくにCSSでコンテンツに対してdisplay:none;をしてしまうと、javascriptを切った状態ではコンテンツを見ることができなくなってしまうので、それは避ける。
  • 要素の指定を何度も使いそうなもの、要素指定が長ったらしくなりそうなものは、最初に変数に入れてしまうと後のコードがすっきりするかも。

サンプル

サンプルはこちらから