SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

【javascript】jQueryだけでタブ切り替えサンプル(ローテク版)

jquery.ui を使えば、美しいタブ切り替えをあっという間に作成可能です。

uiを導入していないとき、あまりあれこれ入れたくないとき、美しくなくていいとき(?)など、何かしらの事情がある場合は、jqueryだけで十分です。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>jQueryだけでタブ切り替えサンプル</title>
<style type="text/css">
	/* タブっぽく並べて */
	#tabs ul {list-style:none;}
	#tabs li {float:left; width:150px;}
	#tabs a {display:block; margin:5px; border:1px solid #ccc; padding:5px;}
	/* 最初はパネルは非表示 */
	#tabs .panel {display:none; clear:both; width:780px; border:1px solid #ccc; padding:10px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	/**
	 * 1行で書いて、必要なだけコピペ
	 * hrefが#tab何々となっているアンカーをクリックすると
	 * IDがpanel何々となっているdivを全部非表示にして、希望のpanelをフェードインして表示
	 * event.preventDefault() は onclick="return false;"的な役目
	 */
	$('#tabs a[href="#tab1"]').click(function(event){$('#tabs div[id^="panel"]').hide(); $("#panel1").fadeIn(); event.preventDefault();})
	$('#tabs a[href="#tab2"]').click(function(event){$('#tabs div[id^="panel"]').hide(); $("#panel2").fadeIn(); event.preventDefault();})
	$('#tabs a[href="#tab3"]').click(function(event){$('#tabs div[id^="panel"]').hide(); $("#panel3").fadeIn(); event.preventDefault();})
	$('#tabs a[href="#tab4"]').click(function(event){$('#tabs div[id^="panel"]').hide(); $("#panel4").fadeIn(); event.preventDefault();})
})
</script>
</head>
<body>
<h1>jQueryだけでタブ切り替えサンプル</h1>
<div id="tabs">
	<ul>
		<li><a href="#tab1">お知らせ</a></li>
		<li><a href="#tab2">ご利用方法</a></li>
		<li><a href="#tab3">利用規約</a></li>
		<li><a href="mailto:test&#64;example.com">お問い合わせ</a></li>
		<li><a href="#tab4">運営会社</a></li>
	</ul>

	<div id="panel1" class="panel">
		<p>普通のタブ切り替えサンプルです。</p>
	</div>

	<div id="panel2" class="panel">
		<p>もっとハイテクな書き方もできますが、わりとローテク&コピペで増やせる作戦を実施しています。</p>
	</div>

	<div id="panel3" class="panel">
		<p>タブの中にメール送信など変わったアクションが混ざっていても大丈夫です。</p>
	</div>

	<div id="panel4" class="panel">
		<p>順番や配置の位置関係には特にルールがありません。</p>
		<p>逆に、1個目のタブをクリックすると1個目のパネルを開くといったルールを決めれば、Javascriptはもっと短くできます。</p>
		<p>デザインに関しても、ほぼ作成者の自由になります。</p>
	</div>
</div>
</body>
</html>

動作サンプル

普通のタブ切り替えサンプルです。

もっとハイテクな書き方もできますが、わりとローテク&コピペで増やせる作戦を実施しています。

タブの中にメール送信など変わったアクションが混ざっていても大丈夫です。

順番や配置の位置関係には特にルールがありません。

逆に、1個目のタブをクリックすると1個目のパネルを開くといったルールを決めれば、Javascriptはもっと短くできます。

デザインに関しても、ほぼ作成者の自由になります。

jQueryは、セレクタが強力なので操作したい要素を探すのが楽。

ある程度出来合いの操作があるので、操作も楽(表示、非表示、フェードイン、フェードアウト etc.)

こちらも!

この記事はだいぶ以前に書いたものなので、こちらも書いてみました。

【Javascript】jQueryだけでタブ切り替えの例(また)

関連するメモ

コメント(1)

sato 2012年3月11日 12:11

他のサイトの解説はいまいち分からなかったのですが、ここの解説を参考にしたところ、簡単に出来ました!!
ありがとうございました。