よくあるタブ切替をjQueryで作成しました。プラグイン等も多数ありますがスクリプトを数行書くだけなので、わざわざレスポンスを落としてまでプラグインを使う必要性が感じられないので、いつも下記ソースをベースに作成します。
2012/9/7 要望が多かったのでタブを画像にしたパターンの記事も作成しました。
タブの切替 | よく使うjQuery（画像編）
タブの切替
■html
<ul id="tab"> <li class="select">タブ1</li> <li>タブ2</li> <li>タブ3</li> <li>タブ4</li> </ul> <div class="content_wrap">内容1</div> <div class="content_wrap disnon">内容2</div> <div class="content_wrap disnon">内容3</div> <div class="content_wrap disnon">内容4</div>
■javascript
$(function() {
$("#tab li").click(function() {
var num = $("#tab li").index(this);
$(".content_wrap").addClass('disnon');
$(".content_wrap").eq(num).removeClass('disnon');
$("#tab li").removeClass('select');
$(this).addClass('select')
});
});
解説
htmlやcssは各々お好みで問題ありません。htmlの基本的な構造は、タブとタブに連動したコンテンツ↓になります。
<li class="select">タブ1</li> <li>タブ2</li> <li>タブ3</li> <li>タブ4</li> <div class="content_wrap">内容1</div> <div class="content_wrap disnon">内容2</div> <div class="content_wrap disnon">内容3</div> <div class="content_wrap disnon">内容4</div>
ちなみクラス「select」は選択されているタブを分かり易くする為のクラスです。
.select {
background: yellow;
}
コンテンツは初期に表示するもの以外は非表示にします。私の場合はいつも「disnon」という非表示用のクラスを用意しておきます。
.disnon {
display: none;
}
そして肝心のスクリプトの中身ですが、まずid「tab」の「li」要素をクリックしたら、
$("#tab li").click(function() {
変数「num」にクリックした要素のindex（番号）を格納し、全ての「.content_wrap」を持つ要素に「addClass(‘disnon’)」で非表示用のクラス「disnon」を追加します。
var num = $("#tab li").index(this);
$(".content_wrap").addClass('disnon');
「content_wrap」のうち、番号が同じもの「eq(num)」から「removeClass(‘disnon’)」で非表示用クラス「disnon」をはずします。
同様に全てのタブから「removeClass(‘select’)」でハイライト用のクラス「select」をはずします。
$(".content_wrap").eq(num).removeClass('disnon');
$("#tab li").removeClass('select');
最後にクリックされたタブに、ハイライト用のクラス「select」を追加して完了です。
$(this).addClass('select');
はじめまして。
いつも勉強させて頂いています。
お時間があればお教え頂きたいのですが、div.content_wrapを表示する際に”fadeIn”を追加したい場合は、どのようにすれば宜しいでしょうか。
自分で色々やってみたのですが、うまく動作せず困っています。
初歩的な質問で恐縮ですが宜しくお願いします。
classで制御している表示・非表示をhide()とfadeIn()に書き換えればよいかと思います。
例）
$(function() {
$(“#tab li”).click(function() {
var num = $(“#tab li”).index(this);
$(“.content_wrap”).hide();
$(“.content_wrap”).eq(num).fadeIn();
$(“#tab li”).removeClass(‘select’);
$(this).addClass(‘select’)
});
});
これでいかがでしょうか？
出来ました！
hideをせずにfadeinだけしてたので動作しなかったようです。
勉強になりました！！
ありがとうございました。
今後とも拝見させて頂きますので宜しくお願いします。
お役に立ててなりよりです！
すみません質問なんですが、
タブのデザインをそれぞれ変えることはできますか？
（背景に画像表示させるなどもできますか）
お教えいただけると幸いです。よろしくお願いします。
閲覧ありがとうございます。
タブのデザインですがCSSを使って自由にデザインを変更することが可能です。
例）
一例ですが、以下に対してそれぞれidを振り、
<li class="select">タブ1</li>
<li>タブ2</li>
<li>タブ3</li>
<li>タブ4</li>
↓
<li id=”test1″ class="select">タブ1</li>
<li id=”test2″>タブ2</li>
<li id=”test3″>タブ3</li>
<li id=”test4″>タブ4</li>
各idに対してスタイルを設定すればよいかと思います。
#test1 {
background: url（イメージのパス);
}
#test2 {
background: url（イメージのパス);
}
・
・
・
はじめまして
いつも参考にさせていただきありがとうございます。
質問なのですが
タブ内にあるアンカーポイントへ別ページからのダイレクトリンクは可能ですか？
が指定されている最初のタブ内だと別ページから移動できるのですが、他のタブ内のリンクへは移動できません。
お手数をおかけしますが教えていただけないでしょうか。
よろしくお願いいたします。
このページのサンプルでいうと、別ページから飛んできた際に、タブ2が選択された状態ということで宜しいでしょうか？
結果から言うと出来ます。
以前書いた以下のサンプルとの合わせ技になります。
http://www.finefinefine.jp/web/kiji1818/
パラメータを渡して指定すればいけるかと思います。
ご回答ありがとうございます。
早速試してみたのですが、リンク先のタブをCSSで非表示（display: none;）（タブを押したときに表示される）にしているせいなのかうまく移動できないようです。
他に方法はございますか？
以下のサンプルでいかがでしょうか？
■リンク元のページ
<a href="sample2.html?no=1">タブ2へ移動</a>
■タブのあるページ（sample2.html）
$(function() {
var n = window.location.href.slice(window.location.href.indexOf('?') + 4);
$(".content_wrap").addClass('disnon');
$(".content_wrap").eq(n).removeClass('disnon');
$("#tab li").removeClass('select');
$("#tab li").eq(n).addClass('select')
$("#tab li").click(function() {
var num = $("#tab li").index(this);
$(".content_wrap").addClass('disnon');
$(".content_wrap").eq(num).removeClass('disnon');
$("#tab li").removeClass('select');
$(this).addClass('select')
});
});
移動はできるようになりました。
ありがとうございます。
2点ほどおかしなところがありまして
1.別ページから移動した際、指定のタブ以外にそれ以下のタブも表示される
例：タブ2に移動したとき タブ2、タブ3、タブ4もまとめて表示される
※タブ1は表示されません
2.タブのあるページを開いたとき元々はタブ1のみ表示されていたのですが
表示されなくなりました。
最初はタブ1のみ表示させたい
度々申し訳ございません。
以上ご教授していただければ幸いです。
当ページでダウンロードできるサンプルで試した分にはそういったことはないかと思います。
宜しければ、yossyさんの作成されているサンプルをどこかにアップして頂くか、javascriptをコードを見せて頂ければアドバイスできるかと思います。
開発中のためアップはできないのですが
使用しているコードを以下に記載します。
■使用ジャバスクリプト（別ファイルにして読み込んでいます）
$(function() {
var n = window.location.href.slice(window.location.href.indexOf(‘?’) + 4);
$(“.content_wrap”).addClass(‘disnon’);
$(“.content_wrap”).eq(n).removeClass(‘disnon’);
$(“#tab li”).removeClass(‘select’);
$(“#tab li”).eq(n).addClass(‘select’)
$(“#tab li”).click(function() {
var num = $(“#tab li”).index(this);
$(“.content_wrap”).addClass(‘disnon’);
$(“.content_wrap”).eq(num).removeClass(‘disnon’);
$(“#tab li”).removeClass(‘select’);
$(this).addClass(‘select’)
});
});
■スタイルシート（別ファイルにして読み込んでいます）
#sample {
margin-top: 20px;
}
#tab li {
float: left;
padding: 10px;
list-style: none;
cursor: pointer;
width: 90px;
font-size: 10px;
margin-right: 6px;
background-image: url(../img_common/page-tab-bg.gif);
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CC0000;
height: 12px;
}
#tab li.select {
background-image: url(../img_common/page-tab-bg-h.gif);
}
.disnon {
display: none;
}
.content_wrap {
clear: left;
width: 470px;
}
■ＨＴＭＬ（タブページ）
ご発注方法
ご発注の流れ
受注確定について
ご注文時のご注意
印刷内容について
お届けについて
翌日到着範囲の目安
出荷日について
特急仕上げサービス
内容1
内容2
内容3
内容4
■ＨＴＭＬ（リンクページ）
1
2
3
すみません、htmlのタグをエスケープして頂いてよろしいでしょうか？
http://lightson.dip.jp/zope/ZWiki/236HTML_e3_82_92_e3_82_a8_e3_82_b9_e3_82_b1_e3_83_bc_e3_83_97_e3_81_99_e3_82_8b
初めまして。
いつも拝見させていただいています。
現在勉強中で、1点教えていただきたいことがございます。
コンテンツの量が多く、ページ下部に「次へ」や「前へ」などのナビゲーションを追加したい場合はどのようにすればよいでしょうか。
いろいろ思案して試していますが、なかなかうまくいきません。
大変簡単なご質問で恐縮ですが、よろしくお願いいたします。
いくつかやり方はあるかと思います。
コンテンツ量にもよりますが、一番良いのはサーバーサイドのプログラムを組むことかと思います。
JavaScriptで表現するのでしたら当記事のように表示・非表示を制御する。もしくは、ファイルを分けてjQueryのload()を使う(http://www.finefinefine.jp/web/kiji1706/)といった方法もあるかと思います。
時間をいただけるのでしたらサンプルをお作りします。
>>#14
エスケープってこれでいいのですか？
エスケープツールっていうのを使ってみました…
■ＨＴＭＬ（タブページ）
<div id="sample">
<ul id="tab">
<li class="select">ご発注方法</li>
<li>ご発注の流れ</li>
<li>受注確定について</li>
<li>ご注文時のご注意</li>
<li>印刷内容について</li>
<li>お届けについて</li>
<li>翌日到着範囲の目安</li>
<li>出荷日について</li>
<li>特急仕上げサービス</li>
</ul>
<div class="content_wrap">内容1</div>
<div class="content_wrap disnon">内容2</div>
<div class="content_wrap disnon">内容3</div>
<div class="content_wrap disnon">内容4</div>
</div>
■ＨＴＭＬ（リンクページ）
<div id="sample">
<a href="../order/test.html?no=1" rel="nofollow">1</a>
<a href="../order/test.html?no=2" rel="nofollow">2</a>
<a href="../order/test.html?no=3" rel="nofollow">3</a>
</div>
①に関しては確認できませんでした。
②に関してはこちらの確認不足でした。以下でうまくいくかと思います。
if(n.length < $("#tab li").size()) {
$(".content_wrap").addClass('disnon');
$(".content_wrap").eq(n).removeClass('disnon');
$("#tab li").removeClass('select');
$("#tab li").eq(n).addClass('select')
}
何度もお手数おかけして申し訳有りません。
＃18で書いていただいたコードは元の分に追加すればよろしいのでしょうか？
それとも元の分を削除して差し替えればよろしいでしょうか？
最終的にジャバスクリプト部分がどうなるのかわからなくて…
よろしくお願いいたします。
if文を追加していただければOKです。
$(function() {
var n = window.location.href.slice(window.location.href.indexOf(‘?’) + 4);
if(n.length < $("#tab li").size()) {
$(".content_wrap").addClass('disnon');
$(".content_wrap").eq(n).removeClass('disnon');
$("#tab li").removeClass('select');
$("#tab li").eq(n).addClass('select')
}
$(“#tab li”).click(function() {
var num = $(“#tab li”).index(this);
$(“.content_wrap”).addClass(‘disnon’);
$(“.content_wrap”).eq(num).removeClass(‘disnon’);
$(“#tab li”).removeClass(‘select’);
$(this).addClass(‘select’)
});
});
返信ありがとうございます。
スクリプトの記述の仕方を勉強したいと思っていますので、サンプルを作成していただけるなら大変助かります。
私のイメージとしては、各タブで切り替えるdivの中にそれぞれ記事を配置しておき、記事の最後に次へのボタンがあって(テキストでも可)、次へをクリックすると次のタブに切り替わるというものです。
1ページ目は次へのみですが、2ページ目からは前へも出てくるようにしたいです。
HTMLとCSSは私で作成できます。
スクリプトの仕組みを勉強したいと思っています。
お手数ですが、よろしくお願いいたします。
ありがとうございます。
これで②の問題は解決しました。
①の問題は解決していないのですが、これは他のコードが邪魔したりしてるのかもしれません。余計なものを外したりしていろいろ試してみます。
いろいろお手間をとらせてしまってすいませんでした。
本当にありがとうございます。
また何かありましたらお気軽にご質問下さい。
初めまして、いつも勉強させて頂いております。
参考にさせていただく中で不明な点があるのですが、もし宜しければご回答いただけませんでしょうか。
#5,6の質問にて、各タブのデザインをCSSで自由にデザイン出来るとの質問／回答がありましたが、
各タブのデザインを変更した上で、さらに
各タブがselect状態になった際にそれぞれ異なる画像を表示させる（＝デザイン画像を差し替える）ことは可能でしょうか？
ご教示いただけましたら幸いです。どうかよろしくお願い申し上げます。
閲覧ありがとうございます。
サンプルを作成しましたのでご確認下さい。
http://www.finefinefine.jp/wp/sample/sample2_1.html
ダウンロードは以下
http://www.finefinefine.jp/wp/wp-content/uploads/sample2_1.zip
尚、変更箇所は30行目～49行目のCSSになります。
ruiさん
解説記事を作成しましたので宜しかったら閲覧して下さい。
http://www.finefinefine.jp/web/kiji2087/
シンプルでとても使いやすいスクリプトをありがとうございます。
もしよろしければjavascriptについて一点、お答えいただけたら幸いです。
タブのの中を、テキストではなく画像にしたいのですが、![]()
を配置しています。
javascriptを使ってマウスオーバーで変化させているので、
背景画像ではなく実際の
例えば、
通常時：button1_still.gif
オーバー時：button1_over.gif
という２枚の画像を用意して、マウスオーバー／マウスアウトで切り替えます。
で、タブのにselectのクラスが与えられた時に
button1_select.gif という画像を用意して（button1_over.gif でも良いです）、
それを表示させることができないかと思いましたが、
これ、という記事を他で見つけることができず、質問させていただきました。
スクリプトとは直接関係がない部分で恐縮ですが、
ご教授いただければ嬉しく思います。
よろしくお願いいたします。
閲覧ありがとうございます。
ruiさん、rkataokaさんと同じ質問かと思いますので、以下のサンプルをご確認下さい。
http://www.finefinefine.jp/wp/sample/sample2_1.html
ダウンロードは以下
http://www.finefinefine.jp/wp/wp-content/uploads/sample2_1.zip
尚、変更箇所は30行目～49行目のCSSになります。
あ、すみません、コメント中のタグはエスケープされてしまうんですね。
タグを全角で打ち直しました。
シンプルでとても使いやすいスクリプトをありがとうございます。
もしよろしければjavascriptについて一点、お答えいただけたら幸いです。
タブの＜li＞の中を、テキストではなく画像にしたいのですが、
javascriptを使ってマウスオーバーで変化させているので、
背景画像ではなく実際の＜img＞を配置しています。
例えば、
通常時：button1_still.gif
オーバー時：button1_over.gif
という２枚の画像を用意して、マウスオーバー／マウスアウトで切り替えます。
で、タブの＜li＞にselectのクラスが与えられた時に
button1_select.gif という画像を用意して（button1_over.gif でも良いです）、
それを表示させることができないかと思いましたが、
これ、という記事を他で見つけることができず、質問させていただきました。
スクリプトとは直接関係がない部分で恐縮ですが、
ご教授いただければ嬉しく思います。
よろしくお願いいたします。
sindoさん
解説記事を作成しましたので宜しかったら閲覧して下さい。
http://www.finefinefine.jp/web/kiji2087/
閲覧ありがとうございます。
ruiさんと同じ質問かと思いますので、以下のサンプルをご確認下さい。
http://www.finefinefine.jp/wp/sample/sample2_1.html
ダウンロードは以下
http://www.finefinefine.jp/wp/wp-content/uploads/sample2_1.zip
尚、変更箇所は30行目～49行目のCSSになります。
rkataokaさん
解説記事を作成しましたので宜しかったら閲覧して下さい。
http://www.finefinefine.jp/web/kiji2087/
タブ機能の記事とてもわかりやすくて助かりました！
ただ一つ問題が…ＨＴＭＬ内のcontentクラスにdisnonを追加しておくと、別ページをクリックした時に何故か非表示が解除されなかったので、スクリプト 内で指示してみました。
$(document).ready(function() {
//最初だけ読み込む
//インデックス０以外のクラスのうしろにdisnonクラスを追加
$(“.content_wrap:gt(0)”).addClass(“disnon”);
//クリックするたび
$(“#tab li”).click(function() {
var num = $(“#tab li”).index(this);
$(“.content_wrap”).addClass(‘disnon’);
$(“.content_wrap”).eq(num).removeClass(‘disnon’);
$(“#tab li”).removeClass(‘select’);
$(this).addClass(‘select’)
});
});
これだとクラス名全部一緒で済むかなって…。
ルーズな人用対策。
はじめまして。
タブメニューの作成方法を探していて、こちらのページにたどりつきました。
理想どおりの動作をし、とても感謝しております。
コメント欄を参考に、他ページからのリンクで指定したタブメニューを開くようにし、
フェードインにました。
もう1点やりたいことがあるのですが、
他ページのあるボタンからジャンプした場合に
全てのコンテンツが開いた状態にすることは可能でしょうか？
大変恐縮ですが、もし実現可能でしたらお教え頂いても宜しいでしょうか。
下記、現在の設定しているスクリプトになります。
$(function() {
var n = window.location.href.slice(window.location.href.indexOf(‘?’) + 4);
$(“.content_wrap”).hide();
$(“.content_wrap”).eq(n).fadeIn();
$(“.tab li”).removeClass(‘select’);
$(“.tab li”).eq(n).addClass(‘select’)
$(“.tab li”).click(function() {
var num = $(“.tab li”).index(this);
$(“.content_wrap”).hide();
$(“.content_wrap”).eq(num).fadeIn();
$(“.tab li”).removeClass(‘select’);
$(this).addClass(‘select’)
});
});
$(function() {
var n = window.location.href.slice(window.location.href.indexOf(‘?’) + 4);
if(n.length < $(".content_wrap").size()) {
var p = $(".content_wrap").eq(n).offset().top;
$('html,body').animate({ scrollTop: p }, 'slow');
return false;
}
});
どうぞ宜しくお願いいたします。
リンク元ページのリンク先に○○○?no=all等のパラメータを付けて、リンク先のscriptを以下のように変えれば実現できるかと思います。
$(function() {
var n = window.location.href.slice(window.location.href.indexOf(‘?’) + 4);
if(n == ‘all’) {
$(“.content_wrap”).removeClass(‘disnon’);
} else if(n.length < $("#tab li").size()) {
$(".content_wrap").addClass('disnon');
$(".content_wrap").eq(n).removeClass('disnon');
$("#tab li").removeClass('select');
$("#tab li").eq(n).addClass('select')
}
$("#tab li").click(function() {
var num = $("#tab li").index(this);
$(".content_wrap").addClass('disnon');
$(".content_wrap").eq(num).removeClass('disnon');
$("#tab li").removeClass('select');
$(this).addClass('select')
});
});
はじめまして。たいへん参考になります。
#5と#6の箇所で質問です。
マウスオーバー時にも.selectと同じ画像を表示させたい場合はどのようにすればよいでしょうか？
タグを使用しないで表示させたいです。
よろしくお願いいたします。
はじめまして。たいへん参考になります。
#5と#6の箇所で質問です。
マウスオーバー時にも.selectと同じ画像を表示させたい場合はどのようにすればよいでしょうか？
＜a＞タグを使用しないで表示させたいです。
よろしくお願いいたします。
早速ありがとうございました。
http://www.finefinefine.jp/wp/sample/sample2_1.html
を拝見しますと、マウスオーバー時に画像の変化ないのですが？
解説記事もみてみます。
試していませんが、マウスオーバー時に画像を変化させる場合はmouseoverイベント時にaddClassでselectを追加すればよいかと思います。
そしてmouserout時にremoveClassでselectを取り除けば恐らくご要望の動作をするかと思います。
#35で質問しましたmegです。
http://asahiruban.main.jp/test_tab/season.html
いろいろ参考にさせていただいて作りました。
（もっとよい書き方があるかもしれませんが）
大変助かりました。ありがとうございました。
参考になれば幸いです。
こんばんは。
#33に返信ができなかったので、新たに失礼します。
ご回答頂きありがとうございました！
もう1点試してみて、わからなかったので質問させて頂いて宜しいでしょうか。
こちら（http://html-five.jp/350/）のページのように別ページから戻っても最後のタブが開かれた状態にすることはできますでしょうか？
先ほどのページを参考にjQuery Cookieというものでやってみましたが、finnapple さんのスクリプトをそのまま使用した場合がわからなｋったので、
教えて頂けたら幸いです。
どうぞ宜しくお願いいたします。
サンプルで使っている、変数「num」や、「n」の値をCookieに保存すればよいかと思います。
そしてページを開いた際にCookieから保存してある値を呼び出してセットすれば最後の状態にすることができると思います。
はじめまして。いつも大変ためになる記事をありがとうございます。
こちらに質問する事ではないかもしれませんが、掲載のサンプルソースは商用サイトに利用してもよろしいでしょうか？
閲覧ありがとうございます。
商用利用問題ありません。
こんにちわ。タブ切りかえの記事、大変参考になりました。
タブについて質問があります。
「タブ内にあるアンカーポイントへ別ページからのダイレクトリンクは可能ですか？」の質問から、別ページからリンクして、タブ2が選択された状態といのはできたのですが、そのタブ2内のページ内リンクに飛ばすことはできるのでしょうか？
別ページの＜a href=”★★”＞から
hoge.htmlのタブ2内 id=”naiyo” の場所へとばしたいです。
ご教授していただけないでしょうか、宜しくお願い致します。
はじめまして、お世話になります。
タブの記事とても参考になっております。
私の勉強不足かもしれませんが、別ページからのリンク方法はわかったのですが、
同じページのアンカーリンクからタブ内のアンカーポイント、もしくはタブへの移動は可能なのでしょうか？
お手数をおかけしますが、よろしくお願いします。
可能だと思います。
以前作成した以下のサンプルが参考になるのではないかと思います。
http://www.finefinefine.jp/wp/sample/sample10.html
※イメージが違ったらすみません。
お世話になります！
探しても見つからなかったため、こちらの記事を参考に教えて頂ければと思います。
画像の下にタブメニューを設置して、タブメニューにマウスオーバーでメニュー上部の画像が切り替わるが、マウスアウトで指定した画像に自動的に戻るというものです。
お手数をおかけしますが、よろしくお願いします。
閲覧ありがとうございます。
簡易なイメージですが、以下のようにhover()でマウスオーバー・マウスアウト時の処理を、index()を使って対象要素が何番目かを指定すれば良いかと思います。
$(タブメニュー).hover(function() {
var num = $(タブメニュー).index(this);
$(画像要素).eq(num).attr(‘src’, “切り替える画像パス”);
}, function() {
$(画像要素).eq(num).attr(‘src’, “元の画像パス”);
}
はじめまして。参考にさせていただいております。
タブについての質問なのですが、
[tab1][tab2][tab3]
[内容]
[tab1][tab2][tab3]
のように同じタブを複数配置し、同時に動作させることは可能でしょうか？
お手数ですがよろしくお願いします。
閲覧ありがとうございます。
タブを複数設置する場合は、作りを少々変更する必要があります
タブにclass名を設定し、class◯◯をクリックしたら1番目の要素を表示、class△△をクリックしたら2番目のの内容を表示といった具合で実現できるはずです。
とってもとっても初歩的な質問なんですが、
下記を、いっしょにつけてるのですが、
バッティングしてうまく#tab liが切り替わりません。
(というのは、コンテンツの中身の切り替えはせずに、
長〜いコンテンツのページ内リンク(ジャンプ)をしたく、
必要なのは、#tab liの切り替わりのみになります。)
上記をはずすとうまく動作します。
$(function(){
$(“a”).click(function(){
$(‘html,body’).animate({ scrollTop: $($(this).attr(“href”)).offset().top }, ‘slow’,’swing’);
return false;
})
});
どのようにしたらよろしいでしょうか？
アドバイスお願いいたします。
度々すみません。
aタグにクラスをつけることで解決いたしました！
またなにかありましたら投稿させてください。勉強になります。
閲覧ありがとうございます。
また何かございましたらご質問お待ちしております。