【javascript】jQueryだけでタブ切り替えサンプル（ローテク版）
Category JavaScript
/ Tagged jQuery
2010/03/02
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@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.）
こちらも！
この記事はだいぶ以前に書いたものなので、こちらも書いてみました。
他のサイトの解説はいまいち分からなかったのですが、ここの解説を参考にしたところ、簡単に出来ました！！
ありがとうございました。