jstarted.com
JavaScript/HTML/CSSのノウハウや覚書を掲載するブログ
2012.9.22

タブ切り替えのナビゲーションを自作する

Category:

タブクリックでセクションを切り替えるUIは随分前から広く使われていると思いますが、わざわざライブラリを使うほどの複雑さもなく、jqueryのeach()を理解・練習するためにはちょうどいい題材だったので、自作してみました。

注意したのは、javascriptがオフになっている場合も可読性や操作性を損なうことなく表示されるようにすることと、アンカー付きで別ページから遷移してきた場合にそのセクションを初期表示するようにしたことです。

まずはhtmlのコードから。

<ul id="tabNavi">
<li><a href="#section01">section01</a></li>
<li><a href="#section02">section02</a></li>
<li><a href="#section03">section03</a></li>
</ul>

<div id="section01">
<p>section01です。</p>
</div>

<div id="section02">
<p>section02です。</p>
</div>

<div id="section03">
<p>section03です。</p>
</div>

jsがオフの場合はただのページ内リンクとしてタブが機能するようにします。
次はjavascriptのコード。

var tab = '#tabNavi'; //タブのナビを指定
var tab_lnk = tab + ' a'; //タブナビ内のリンク
var slct_cls = 'selected';

//アンカー付URLでアクセスした場合に、そのアンカーが指すタブを表示させるための準備変数
var thisUrl = document.URL;
var anch_srch = thisUrl.lastIndexOf('#');

//最初のタブの指すidを取得して、タブに選択済classを付与する関数
function first_child() {
	$(tab_lnk).first().addClass(slct_cls);
	sct_1st = $(tab_lnk).first().attr('href');
}

//アンカー付URLの場合と、そうでない場合の初期表示分岐
if(anch_srch > -1){
	var anch_str = thisUrl.substr(anch_srch);
	var mch_id = 0;
	$(tab_lnk).each(function() {
		var sct = $(this).attr('href');
		if(sct == anch_str){
			$(this).addClass(slct_cls);
			mch_id =+ 1;
		}
		$(sct).hide();
	});
	if(mch_id > 0){
		var sct_1st = $(anch_str);
	} else {
		firstChild();
	}
} else {
	$(tab_lnk).each(function() {
		var sct = $(this).attr('href');
		$(sct).hide();
	});
	first_child();
}
$(sct_1st).show();

//タブクリックによるセクションの切り替え
$(tab_lnk).click(function() {
	var sct_slct = $(this).attr('href');
	$(sct_slct).fadeIn(500);
	$(tab_lnk).each(function() {
		var sct = $(this).attr('href');
		$(sct).not(sct_slct).hide();
		$(this).removeClass(slct_cls);
	});
	$(this).addClass(slct_cls);
	return false;
});

動作のデモはこちら。
タブナビ自作(アンカーリンクの有無で初期表示セクションを切り替える) - jsdo.it - Share JavaScript, HTML5 and CSS

タブの初期表示を、一旦セクションをすべて消してから選択されたもののみ再表示するという方法を取っていますが、このあたりもっとうまくやれるかもしれません。。。

jstarted.comはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を
獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、
Amazonアソシエイト・プログラムの参加者です。

クリエイティブ・コモンズ・ライセンス
jstarted.com by yoichi kobayashi is licensed under a Creative Commons 表示 3.0 非移植 License.