SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
技術者募集中

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

このエントリーをはてなブックマークに追加
Category JavaScript 2012/02/04

問題

jQueryだけで、タブっぽいの、たのむ。

解答例

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

ただ、比較的よく検索にヒットしている以前書いたこれの内容が古いので、改めてjqueryだけでタブ切り替え風の動きをさせてみます。

出来合いのライブラリを使うと、うまくデザインを変更できなくて困っているときにもどうぞ。

改善点

ソースサンプル

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQueryだけでタブ切り替えサンプル 2</title>
<style type="text/css">
	/* タブっぽく並べて */
	#tabs ul {overflow:hidden; height:2em; list-style:none; border-bottom:1px solid #cccccc;}
	#tabs li {float:left; display:inline; margin-left:10px; padding:5px; border:1px solid #ccc; border-bottom:none; border-radius:10px 10px 0 0;}
	/* 最初はパネルは非表示 */
	#tabs .panel {display:none;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	/**
	 * それぞれのタブをクリックしたとき開きたい要素がどれになるかはHTMLの方に書くようにしたので、Javascriptの方は1行でよい
	 * id="tabs"の中のhrefが#panel何々となっているa要素をクリックすると
	 * classがpanelとなっているdivを全部非表示にして、クリックしたタブのハッシュと同じIDの要素だけをフェードインして表示
	 * return false で onclick="return false" と同様にデフォルトのイベント処理は抑制
	 */
	$('#tabs a[href^="#panel"]').click(function(){
		$("#tabs .panel").hide();
		$(this.hash).fadeIn();
		return false;
	});
	//わざと1つ目を表示させておくことができます
	$('#tabs a[href^="#panel"]:eq(0)').trigger('click');
})
</script>
</head>
<body>
<h1>jQueryだけでタブ切り替えサンプル</h1>
<div id="tabs">
	<ul>
		<li><a href="#panel1">お知らせ</a></li>
		<li><a href="#panel2">ご利用方法</a></li>
		<li><a href="#panel3">利用規約</a></li>
		<li><a href="mailto:test&#64;example.com">お問い合わせ</a></li>
		<li><a href="#panel4">運営会社</a></li>
	</ul>

	<div id="panel1" class="panel">
		<p>1つ目のタブの内容。</p>
		<p>1つ目のタブの内容。</p>
	</div>

	<div id="panel2" class="panel">
		<p>2つ目のタブの内容。</p>
		<p>2つ目のタブの内容。</p>
	</div>

	<div id="panel3" class="panel">
		<p>3つ目のタブの内容。</p>
		<p>3つ目のタブの内容。</p>
	</div>

	<div id="panel4" class="panel">
		<p>4つ目のタブの内容。</p>
		<p>4つ目のタブの内容。</p>
	</div>
</div>
</body>
</html>

デモ

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

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

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

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

タブの方にどのパネルを開くか書いてあるので、Javascriptはそれに従うだけです。

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

タブの方にどのパネルを開くか書いてあるので、Javascriptはそれに従うだけです。

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

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

4つ目のタブのa要素は、mailto:でメールソフト起動のリンクになっていますが、それはそのように動きます。

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

タブ部分に角丸CSSを指定してみたりしました。

Javascriptでは、タブのa要素をクリックすると、関連するdiv要素を表示することをしているだけです。

CSSはいくら変えても大丈夫です。

デモ2

別ウインドウでデモを開く

関連するメモ

コメント（37）

mii 2012年2月7日 18:09

選択中のタブ色などのカスタマイズはどうやるのでしょうか？

yoshimura 2012年2月7日 18:22

下のように書くと、クリックしたタブだけに class=”active” を付与できるので、スタイルシートで何とかできると思います。

$('#tabs a[href^="#panel"]').click(function(){
    //すべてのli要素の class="active" を取り除いて
    $("#tabs li").removeClass("active");
    //今クリックされたa要素の親要素になるliだけに class="active" を付与する
    $(this).parent().addClass("active");
    $("#tabs .panel").hide();
    $(this.hash).fadeIn();
    return false;
});

mii 2012年2月8日 08:46

ご返信ありがとうございます。
思い通りの動作させることが出来ました！
ありがとうございます。（＊＿　＿）

Tomohisa 2012年2月29日 08:26

こんにちは！
いつも参考にさせていただいてます。
こちらのタブなのですが、ほとんどの環境で動作確認できたのですが
google chrome 17.0.963.56で動作できないようなのです。
見て頂けないでしょうか？宜しくお願い致します！

yoshimura 2012年2月29日 09:07

ご利用ありがとうございますです。
現時点の最新版ですね google chrome 17.0.963.56
私の環境では動いていますが、何かの拡張機能などが悪さをしているなどは考えられるでしょうか？

Tomohisa 2012年2月29日 12:40

とても早いお返事に驚きました。^^

すみません。私の環境をちゃんとお知らせしていませんでした。
MAC OSX 10.6.8
Chromeには拡張機能はいれていませんので、
MAC版だから動いてないのかもしれないですね。。

yoshimura 2012年2月29日 13:42

Mac版Chromeがないので確認できずです。
どなたかわかる方がいたら、書き込みお願いします。

関係ないですが、Linux版Chromeでも動きました。

Tomohisa 2012年2月29日 17:42

別のMACで同バージョン環境での動作確認ができました。
本当にお騒がせして申し訳ありません。。

何かしらの私的な要因があるようです。
原因がわかりましたらお知らせいたします。
この度は親切にありがとうございました！

naoki 2012年3月14日 13:29

ＯＳがＸＰでブラウザがＩＥ7を利用しています。
Fire Foxだと見れないのですが、ＩＥ７だとタブの内容が表示されません。
どうしてでしょうか･･･

naoki 2012年3月14日 13:34

先ほど投稿したものですが、Firefoxだと見れるのですが
IE７.0（それ以前のverも？）だと見ることができません･･･
続けての投稿ですみません。
ご回答の程宜しくお願いいたします。

yoshimura 2012年3月15日 10:26

上の記事に、デモ2 – 別ウインドウでデモを開く を追加しました。
別ウインドウではデモが動作するようでしたら、このページ内にある各種Webサービスのボタンなどでエラーが発生して、その結果このページにあるデモも動いていないのかもしれません。
いかがでしょうか。

naoki 2012年3月15日 18:35

ありがとうございました！
無事、見る事ができました。

hiro 2012年4月24日 11:26

こんにちは★大変参考になりました。
教えてほしいのですが、タブに画像を配置することは
可能でしょうか？

yoshimura 2012年4月24日 11:57

タブのaタグのところに画像を入れるだけだと思いますがどうですか。
<li><a href=”#panel1″><img src=”xxxx.jpg”></a></li>

nuno 2012年5月25日 03:46

スムーススクロールのjsと絡めると時々突然タブ位置までスクロールする症状がでます。
干渉しているのでしょうか？

yoshimura 2012年5月25日 07:10

スムーズスクロールのjsが、a要素でhrefが#で始まるもの全部を対象にしていると、そうなりそうな気がします。
スムーズスクロールの方でタブ用の要素を除外するか、
タブの方でスムーズスクロールしないようにしてからタブ用の処理を追加するなどの対応が必要かもしれません。
（どういう順序で書いているかにもよります）

morimori 2012年5月31日 09:58

いつも参考にさせていただいてます。
初歩的なことで申し訳ないのですが、
こちらのタブなのですが、アクティブのタブのみタブの文字の下の下線をとるようにするにはどうすればいいでしょうか？
すみませんが、よろしくお願い致します。

yoshimura 2012年5月31日 10:38

クリックときの処理に以下を追加して、
$(‘#tabs a[href^=”#panel”]’).parent().removeClass(‘active’);
$(this).parent().addClass(‘active’);
アクティブなタブ(li要素)と非アクティブなタブを区別できるようにして、HTMLとスタイルシートを調整したらよいと思います。
こんな感じでしょうか。
境界線、背景、重ね方などは、全体の状況に応じて調整することになると思います。

morimori 2012年6月5日 11:26

連絡遅くなりました。
ありがとうございます。

morita 2012年9月27日 00:30

勉強させていただいています。
初歩的な質問なのですが、a[href=”#panel”]
これの書き方、特に「 ^ 」が分かりません、
よろしくお願いします。

yoshimura 2012年9月27日 01:34

セレクタです。
http://api.jquery.com/category/selectors/

特に「 ^ 」
http://api.jquery.com/attribute-starts-with-selector/

$(‘a’) は、a要素。
$(‘a[href=”#panel”]’) は、a要素でhref属性が#panelの要素。
$(‘a[href^=”#panel”]’) は、a要素でhref属性が#panel”で始まる”要素。
$(‘a[href*=”hoge”]’) は、a要素でhref属性がhoge”を含む”要素。
$(‘a[href!=”hoge”]’) は、a要素でhref属性がhoge”ではない”要素。
などなどです。

オオクボ 2012年10月25日 20:47

こちらを使わせていただいて
やりたい事ができるようになりました！！
ありがとうございます！

一点だけ
更新すると全てがpanel1にもどってしまいますが
こちらを回避する事はできませんか？

yoshimura 2012年10月26日 08:40

お役に立ったようで何よりです♪

タブが最初に戻ってしまう動きをかえるには、URLのハッシュの部分（#何々）にどこを開いているか反映するか、Cookieにどこを最後に開いたか保存しておいて、初期状態でうまくタブを開くように調整する感じになると思います。

sakura 2012年12月11日 15:56

やりたいことができそうなのでサンプルソースをコピって使わせていただいたんですが、タブをクリックしてもタブの中身を表示してくれず困っています。IE、Chrome、FireFoxで確認しましたがどれも同様でした。初心者のため初歩的な質問で恐縮なのですが、このサンプルソースをHtmlファイルに直接書くだけでだめでしょうか？別途用意しないといけないファイルなどがありましたら教えてください。よろしくお願い致します。

yoshimura 2012年12月11日 16:07

そのままコピペして test.html を作って、ブラウザで開いたら、動きました。
jQuery はGoogleからダウンロードするように書いているので、自分で用意するファイルは他にありません。

sakura 2012年12月11日 17:03

ご回答ありがとうございます。
同じようにtest.html をコピペして作成しましたがやはりタブは作られるのですが、タブをクリックしても動きがありません・・・涙
ページ内に他のScriptなどが記述してあってはいけないのでしょうか？？

yoshimura 2012年12月11日 17:10

他のスクリプトを入れる前に、
とりあえずコピペして動かないという時点で、何かおかしいと思います。
何をされているのか不明なので、なんともいえないのですが……

sakura 2012年12月11日 18:49

何度も申し訳ありません。説明不足で失礼しました。
自社のサイトのテンプレートを使用した新規ページにコピペしてもダメでしたが、自社テンプレートを使わず新規ページでコピペしたらサンプル通り正常に動きます。

yoshimura 2012年12月11日 19:10

id=”tabs”の要素がないなどならすぐ気づきそうですし。何でしょうね。
エラーが起きているかどうかも分からないですし、いただいている情報ではなんとも…

soyo 2013年2月27日 18:15

なんとか２カラムのフレームのように表示させようとしているのですが…何かいい方法はありませんでしょうか。

CSSでリスト表示に切り替えたり色々やってみましたがやはりタイトルが終わったその下からタブの内容が表示される仕様は変えられないですかね。

わかりにくい表現ですみません…。

yoshimura 2013年2月27日 18:24

こんな感じでしょうか。
横にタブ
横にタブ
タブっぽくないタブ？
横にタブのタブっぽくないの

soyo 2013年2月27日 18:36

お早いお返事ありがとうございます…！
悩みの末相談させていただいたのですがつい先ほど自己解決しました。
一連のタブの内容の記述が終わった下にメニュー部分を持ってきたらできました。

大変お騒がせいたしました、すみません。
これからも活用させていただきます。

maru 2013年3月3日 16:49

こちらを使わせて頂き、きれいにタブ切り替えできるようになりました！ありがとうございます＊

1点、質問させて下さい！
他のページから特定のタブに直接とぶことは可能でしょうか？
他のサイトも参考にしたのですが、うまくゆかず。。
ご回答頂けたら嬉しいです。よろしくお願いします！

yoshimura 2013年3月4日 08:52

URLのハッシュ#～など使うのが、よくある方法だと思います。

JavaScript側では、URLの#～を見て、特定のタブを表示状態にしておきます。

K 2013年4月24日 14:29

こんにちは。
シンプルで分かりやすいので、利用させて頂いています。
複数のタブを設置し、各タブ内にGoogleMap API V3で地図を表示しているのですが、2タブ目以降が正しく表示されません（中心がずれて、左上の一部以外がグレーになってしまう）。
display:none;が関与していて、タブをクリックしたタイミングで地図を再読み込みすればいいらしい……というところまでは調べて理解ができました。
しかし、JavaScriptの知識がないもので、対処の仕方が分からない状態です（涙）。
お手数ですが、お時間のある時に教えて頂けると助かります。
よろしくお願い致します！

yoshimura 2013年5月8日 23:51

Google Mapsは、そんなに使い込んでいないので、ちょっと調べていました。
地図の再表示は google.maps.event.trigger(map, 'resize') でできるみたいです。
タブクリック時にresizeイベントを発生させて再表示をさせるか、初期化するタイミングを変えるのがいいのかなと思いました。
→ やってみました
・Google Mapsで地図用コンテナを非表示にして地図を初期化すると表示がおかしい
・Google Mapsをタブに入れるサンプル 1
・Google Mapsをタブに入れるサンプル 2

K 2013年5月15日 13:04

ご回答いただき、どうもありがとうございました。
……感激です！！
私はまだまだ未熟者なので、今後もこちらのサイトで勉強させていただきますね。
この度は、本当にありがとうございました（ぺこり）。