タブ切替コンテンツを実現するjQueryのスクリプト

JavaScript

このサイトを初めてから3連続でjQueryの記事になってしまいました。他の記事も書かなきゃと思っているのですが、記事の為の記事なんて書きたくないと思い、結果今はまっているjQueryの記事になってしまってます。そんな今回はタブ切替コンテンツです。まー、よくあるものですが自分にとってはいつも通り大変でした。一応これでも、動けばいいって感じではなく美しいをコードを目指して端正込めて作ってます。

Demo

必要なファイル

コーディング&設定

HTML

HTMLヘッダー内でjquery.jsを読み込む。

<script src="jquery.js" type="text/javascript"></script>

以下の様にul#tabchange内のlidiv#tabchangeContents内のdiv.tabchangeBoxは同じ数だけ用意する。数はいくつでもよい。次にdiv.tabchangeBox内にコンテンツを記述する。タブとコンテンツの関係は記述順になっている。

#box1#box5はJavaScriptが動作しない環境の場合に、ページ内リンクとして設定している。よってスクリプトとは関係はない。

<ul id="tabchange">
	<li><a href="#box1">タブ1</a></li>
	<li><a href="#box2">タブ2</a></li>
	<li><a href="#box3">タブ3</a></li>
	<li><a href="#box4">タブ4</a></li>
	<li><a href="#box5">タブ5</a></li>
</ul>

<div id="tabchangeContents">
	<div id="box1" class="tabchangeBox">
		<!-- ココにタブ1のコンテンツを記述 -->
	</div>
	<div id="box2" class="tabchangeBox">
		<!-- ココにタブ2のコンテンツを記述 -->
	</div>
	<div id="box3" class="tabchangeBox">
		<!-- ココにタブ3のコンテンツを記述 -->
	</div>
	<div id="box4" class="tabchangeBox">
		<!-- ココにタブ4のコンテンツを記述 -->
	</div>
	<div id="box5" class="tabchangeBox">
		<!-- ココにタブ5のコンテンツを記述 -->
	</div>
</div>

CSS

以下サンプルの記述ですが、結構自由にスタイルは変更出来ます。ただし、タブを画像にする場合、ホバー時や表示コンテンツに対応するタブの画像切替には対応していません。

ul#tabchange {
	width: 500px; /*タブ全体の幅*/
	*zoom: 1; /*forIE6,7*/
}
ul#tabchange:after {
	content: "";
	display: block;
	clear: both;
}
ul#tabchange li {
	width: 100px; /*タブひとつの幅*/
	float: left;
	text-align: center;
}
ul#tabchange li a { /*タブのスタイル*/
	display: block;
	background-color: #666;
	border-right: 1px solid #333;
	border-left: 1px solid #999;
	padding: 10px;
	color: #fff;
	text-decoration: none;
}
ul#tabchange li a:hover { /*ホバー時のタブのスタイル*/
	background-color: #999;
	border-right: 1px solid #666;
	border-left: 1px solid #ccc;
}
ul#tabchange li a.activeBox { /*表示コンテンツのタブのスタイル*/
	background-color: #333;
	border-right: 1px solid #000;
	border-left: 1px solid #333;
	cursor: default;
}
ul#tabchange li a.activeBox:hover { /*ホバー時の表示コンテンツのタブのスタイル*/
	background-color: #333;
	border-right: 1px solid #000;
	border-left: 1px solid #333;
}
div#tabchangeContents {
	width: 500px; /*コンテンツの幅*/
	postion: relative;
}
div#tabchangeContents div.tabchangeBox { /*コンテンツのスタイル*/
	width: 480px; /*コンテンツの幅*/
	background-color: #333333;
	padding: 10px;
}
div#tabchangeContents div.tabchangeBox p {
	color: #fff;
}

JavaScript

以下のスクリプトを記述。

$(function(){

//アニメーション速度設定
	var Speed = "200";

//対象要素設定
	var Tab = "#tabchange li a";
	var TabContents = "#tabchangeContents div.tabchangeBox";
	var ActiveClass = "activeBox";

//href属性を空にする
	$(Tab).attr("href","");

//初期表示設定
	$(Tab+":eq(0)").addClass(ActiveClass);
	$(TabContents).hide().css("position","absolute");
	$(TabContents+":eq(0)").show();

//クリックイベント
	$(Tab).click(
		function(){
			var Index = $(Tab).index(this);
			$(Tab).not(this).removeClass(ActiveClass);
			$(this).addClass(ActiveClass);
			$(TabContents).not(TabContents+":eq("+Index+")").slideUp(Speed,function(){
				$(TabContents+":eq("+Index+"):not(:animated)").slideDown(Speed);
			});
			return false;
		}
	);

});

 スムーズスクロールとの併用が出来ないとの指摘がありましたので、上記スクリプト11~12行目を追加しました。

あとがき

今回のスクリプトで苦労した点は、フィルタの中に変数を入れるところですかね。なぜ効かないのかと思っていたのですが、フィルタって文字列の中にあるので、フィルタを途中分割して文字列と文字列の間に変数を入れることで解決しました。":eq("+Index+")"って感じで。jQuery独自のものなのでメソッド的なイメージがあり、なかなか気づかなかったです。普通に考えるとCSSでいうセレクタですもんね。

jQueryに関しては最近始めたばかりですので、次々と新発見がありホント楽しいです。あと何回jQueryの記事が続くんだろうって位に。。。まーjQuery意外にも興味はイロイロありますのでそのうち他のカテゴリーの記事も書きますのでヨロシクです。

Comment

mayumi

はじめまして。
このサイトを参考にHPを作成しています。
もし許可が要るという事でしたら、無許可で当サイトの情報を使用した事は申し訳ありません。
親切に事細かく記載しているのでとても参考になり、当サイトを拝見しています。

【タブ切替コンテンツを実現するjQueryのスクリプト】を参考にHPを作ってみたのですが、うまく動かないです。

確認画面ではjavaが動いているのですが、
サーバーにUPするとjavaが動いていないみたいです。
a.activeBoxのボーダーやメニューのタブ画像が指定リンクになっても変わらない。
こんな感じなのですが、ご教授願いませんでしょうか??

syuji

> mayumi さん

はじめまして。
基本的にこのサイト内に掲載している内容はご自由にご使用になさって問題ございません。むしろ、役に立てた思えて嬉しい限りです。

スクリプトが動かないとのことですが、情報が少なくて判断が難しいので取り敢えず以下を確認させてください。

ローカルではJavaScriptが動作するが、サーバーにアップすると初期表示はされるがJavaScriptは動作しない。
ということで宜しいでしょうか?

であれば以下をご確認下さい。
1. ブラウザのJavaScriptはオンになっているか。
2. 必要なファイルは全てサーバーにアップされているか。
3. JavaScriptのパスは間違っていなか。
4. 文字コードの違いで文字化けして読み込まれていなか。

上記でも動作しないのであれば、以下の情報を提供頂ければもう少し判断できるかと思います。
・できるなら実際にアップされている環境のURL
・動作しないブラウザの種類
・実際のHTML、CSS、JavaScriptの記述
・それぞれのファイルのディレクトリ

宜しくお願いします。

mayumi

syujiさん
返信ありがとうございます。

ご進言して頂いた上記確認事項については、パスをしていると思われます。

ウェブサイト欄URLよりDLでデーターがあります。
確認をして頂ければ幸いです。

宜しくお願い致します。

syuji

> mayumi さん

データをご用意頂いたので確認がしやすかったです。

原因はJavaScriptのパスが間違っています。
js/jquery.js
js/tab.js
のパスになっていますが、ディレクト構造ではjsフォルダではなくルールにありました。

上記を修正すると動作するようになると思いますが、他にもHTMLやCSSの記述間違い等あります。
技術的な問題というよりもケアレスミスが多いですので、そのあたりをきちんと確認した方が宜しいかと思います。

syuji

> mayumi さん

すみません。以下間違えてました。

jsフォルダではなくルール

jsフォルダではなくルート

mayumi

syuji さん
わたしもjsフォルダに入れずにデーターを送付いたしました。
階層的にはjsフォルダにjavaが入っています。

それでも動かないのですが、それはcss・htmlの記述ミスで動かないって事でしょうか?

syuji

> mayumi さん

html、cssのミスで動作しなということは無いかと思います。(パスのミス以外なら。)

パスの間違いがないというのでしたら、おかしな挙動があるものの動作していますので、原因を特定すのが難しいです。

どの環境(ローカルなのか、サーバー上なのか。ブラウザの種類はなんなのか。OSはなんなのか。)でなのか。ディレクトリ構造はどうなっているのか(頂いたデータは違う構造とのことでしたので)。など、ちょっと不明点が多いです。

すみませんが、実際にアップされている状態を見ないと原因を特定するのは難しいかと思われます。

mayumi

ローカルだと動いているのですが、
サーバーにupすると動かないみたいです。
他にjavaを使ったページが有るのですが、そっちは正常に動いています。
ブラウザはInternet Explorer
OSはWindows XP

syuji

> mayumi さん

頂いたデータのjsを正しいディレクトに変更しサーバーにアップして、windows XPを使用しInternet Explorer(6、7、8)で確認しましたが動作しております。

はじめに確認を促した事項に問題がないようでしたら、すみませんが私の方で原因突き止めるのは難しいです。

ちなみに「Java」と「JavaScript」は別物ですので今後にお気をつけた方がよろしいかと思います。

mayumi

syuji さん
いろいろ教えて頂きありがとうございます。
不勉強だったみたいなので、いろいろ勉強し直したいと
思います。

sino

詳しい説明をしていただいて、動作しております。
ありがとうございます。
ひとつ、質問させてください。

別ページからそれぞれのタブにダイレクトリンクさせるには
どのように記述すれば良いか、四苦八苦しております。

ご教授いただけましたら幸いです。

Syuji

sinoさん。はじめまして。

別ページからそれぞれのタブにダイレクトリンクできるように修正したものを制作してみました。

以下がデモとJavaScriptです。
DEMO
タブ切替コンテンツを実現するjQueryのスクリプト(リンクから直接表示タイプ)

普通のページ内リンクのようにURLの後にid名をつけると指定の要素が直接表示されます。
簡単に作ったので不具合があるかもしれませんので、その際はコメントください。

link

はじめまして。こちらのjs使わせていただいております。
質問なのですが、現在はしたから上にでてくるのですが、右から左にスライドすることは可能でしょうか?
よろしく御願いいたします。

link

スイマセン、もう一度質問したいのですが、上から下に出てくるなどのカスタマイズとかは可能でしょうか?
よろしく御願いします。

Syuji

linkさん。
はじめまして。

現状はクリックするタブが、アクティブなタブの左側か右側かで動きが違うかと思います。上から下のパターンとは、現状の上から下へ動く場合で毎回動作するということでしょうか?

また右から左へのスライド場合は高さは固定でもいいのでしょうか?

link

返信ありがとうございます!
そうです、毎回上から下です。
また、左右の場合は高さは固定で大丈夫です。
ご検討いただければありがたいです。よろしく御願いします。

Syuji

linkさん。

とりあえず上から下へアニメーションだと以下の様な感じですかね。

Demo
JavaScript

少しアニメーションが変わっています。
まったく同じアニメーションだと時間がかかりそうでしたので。
あとこの記事をを書いたあとに作った、プラグイン化したものを使用して変更しています。

横からスライドは、後ほど試してみます。
ちなみのその場合毎回、右から左へスライドですかね?

link

こんな感じです!ありがとうございます!
試してみます!

sae

質問です。
tabchangeContentsの下に有る要素にこのDIVが重なってしまいます。
高さが検出できていないようなのですが、どうすればよいでしょうか?

Syuji

saeさん。

すみません。
なぜかメールが届いておらずコメントに気づけなかったです。。。
結構時間がたっていますので、解決なり他のプラグインを使うなりしていると思いますが、もしこのコメントを見て確認したいことがありましたらご連絡ください。

Top