１ページ内にタブボックスをたくさん設置

解決済

質問者：iguigu_n
質問日時：2014/09/05 15:59
回答数：2件

下記コードはサンプルとして３つしか置いてませんが、実際は何十個と置く予定です
このため、連番をふって１ページ内で複数個置いてもそれぞれが動くようにしたいのですが、
Toggleのところの記述が悪いのかうまく動きません。
初心者ですいませんが、ご教授ください

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>無題ドキュメント</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8. …

<script>
$(function() {

/* 変数i に 1を代入 */
var i = 1;

/* #list li を一つずつ処理 */
$('.tab_menu').each(function(){

/*
#list li に class で no● を設定
●には、i++ で変数iに1を加算したものが入ります
サンプルでは、1から10 です
*/
$(this).attr('id','tabMenu' + (i++));
/* ↑は、$(this).addClass('no' + (i++)); でもOK */
});

var i = 1;
/* #list li を一つずつ処理 */
$('.tab_box').each(function(){

/*
#list li に class で no● を設定
●には、i++ で変数iに1を加算したものが入ります
サンプルでは、1から10 です
*/
$(this).attr('id','tabBoxes' + (i++));
/* ↑は、$(this).addClass('no' + (i++)); でもOK */
});

$("#tabMenu"+(i)+" li a").on("click", function() {
$("#tabBoxes"+(i)+" div").hide();
$($(this).attr("href")).fadeToggle();
});
return false;
});
</script>
<style>

.tab_menu ul{
width:600px;
}
.tab_menu li{
float:left;
}
.tab_menu li a{
display:block;
width:198px;
height:48px;
line-height:50px;
text-align:center;
border:#ccc 1px solid;
}
#tabBox1,#tabBox2,#tabBox3{
width:598px;
height:300px;
border:#ccc 1px solid;
}
#tabBox1{
background:#FCF;
}
#tabBox2{
background:#FFC;
display:none;
}
#tabBox3{
background:#ccc;
display:none;
}
</style>
</head>

<body>
<ul class="tab_menu">
<li><a href="#tabBox1">タブメニュー1</a></li>
<li><a href="#tabBox2">タブメニュー2</a></li>
<li><a href="#tabBox3">タブメニュー3</a></li>
</ul>
<div id="tabBoxes" class="tab_box">
<div id="tabBox1">タブボックス1</div>
<div id="tabBox2">タブボックス2</div>
<div id="tabBox3">タブボックス3</div>
</div>

<ul class="tab_menu">
<li><a href="#tabBox1">タブメニュー1</a></li>
<li><a href="#tabBox2">タブメニュー2</a></li>
<li><a href="#tabBox3">タブメニュー3</a></li>
</ul>
<div id="tabBoxes" class="tab_box">
<div id="tabBox1">タブボックス1</div>
<div id="tabBox2">タブボックス2</div>
<div id="tabBox3">タブボックス3</div>
</div>

<ul class="tab_menu">
<li><a href="#tabBox1">タブメニュー1</a></li>
<li><a href="#tabBox2">タブメニュー2</a></li>
<li><a href="#tabBox3">タブメニュー3</a></li>
</ul>
<div id="tabBoxes" class="tab_box">
<div id="tabBox1">タブボックス1</div>
<div id="tabBox2">タブボックス2</div>
<div id="tabBox3">タブボックス3</div>
</div>

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.1ベストアンサー

回答者： fujillin
回答日時：2014/09/05 18:25

何をなさりたいのかよくわかってませんが・・・

タブ形式の表示が複数あるHTMLに対してスクリプトでタブとして機能するようにしたいのではないかと想像しました。

ご質問に対する直接の回答にはなっていませんが、

まず、ご提示の様な番号を振る考え方から脱却したほうがよさそうに思われます。
（ご提示のHTMLだとidが重複しているので、文法違反にもなっています）
ざっと見たところ、<ul class="tab_menu">とそれに続く<div class="tab_box">がセットになっていて、タブの要素を構成していると見受けました。

タブ的な切替表示ができれば良いだけであれば、要素の位置関係を利用して処理するようにすればよいと思われます。例えば、2番目のタブ（LI要素）をクリックしたら、2番目のコンテンツ（DIV要素）を表示するといった感じです。
これによって、idや番号は不要になりますし、li要素内ののリンクタグも不要にできます。(href属性の参照はしなくなるので）
制御で必要になるのは要素の意味を示すクラスだけで充分ですし、それは同時に、レイアウトや表示を制御するためにCSSで必要とする識別子としても（多分）十分なのではないでしょうか？

現状のままでも良いですし、わかりやすくする意味でtab_menuとtab_boxをセットにして（例えばtab_setで）ラップしておいても良いかと思います。
スクリプトは『同じtab_set内で対応する順序の要素を表示する』といった内容で作成すれば、セットの数によることなく処理が可能ですし、タブの数がそれぞれで違っていても問題ないでしょう。

tab_menu内のLI要素数とtab_box内のDIV要素数が異なっている場合（通常はないはずですが）にスクリプトのエラーがおきる可能性がありますが、対応する要素が存在しない場合は処理しないようにするなどで、HTMLがおかしな場合でもエラーを回避することは可能と思われます。

この回答への補足

ご回答ありがとうございます。

意味合いはあっているかと思いますが、どのように記述すればいいのかがいまいち理解できておりません。
idをclassに変えたりしても変わらないのでご教授いただけないでしょうか？

補足日時：2014/09/05 19:11

通報する

- 0
- 件

通報する

No.2

回答者： fujillin
回答日時：2014/09/08 13:47

ANo1です。

ごく一般的なタブ機能のようですから、検索すればサンプルはいくらでも見つかるはずと思います。（考え方や方法はいろいろあると思いますが）

また、jQueryをご利用のようですが、jQuery UIにも標準的なタブ機能が備えられています。
　http://jqueryui.com/tabs/

とはいえ、簡単なサンプルを一例として…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
.tab_set *{
margin:0; padding:0; list-style-type:none;
}
.tab_set{ width:600px; margin-bottom:30px; }

.tab_menu li{
width:86px; display:inline-block;
padding:4px; margin-right:4px; text-align:center;
color:#888; background-color:#E8E8E8;
border:1px solid #AAA;
}
.tab_menu li.active{
color:#000; background-color:#FFF;
border-bottom:1px solid #FFF;
}

.tab_box{
position:relative; top:-1px;
z-index:-1;
}
.tab_box>div{
height:300px; padding:10px;
border:1px solid #AAA;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9. …

<script type="text/javascript">
$(function(){
var active = "active";
$(".tab_set").each(function(){
$(".tab_menu li", this).click(function(){
var tabs = $(this).parent(".tab_menu").children();
tabs.removeClass(active);
$(this).addClass(active);
var contents = $(this).parents(".tab_set").find(".tab_box").children("div");
contents.hide().eq(tabs.index(this)).show();
}).eq(0).click();
});
});
</script>
</head>
<body>

<div class="tab_set">
<ul class="tab_menu">
<li>タブ1</li><li>タブ2</li><li>タブ3</li>
</ul>
<div class="tab_box">
<div>タブボックス1</div>
<div>タブボックス2</div>
<div>タブボックス3</div>
</div>
</div>

<div class="tab_set">
<ul class="tab_menu">
<li>タブ1</li><li>タブ2</li><li>タブ3</li><li>タブ4</li><li>タブ5</li>
</ul>
<div class="tab_box">
<div>タブボックス1</div>
<div>タブボックス2</div>
<div>タブボックス3</div>
<div>タブボックス4</div>
<div>タブボックス5</div>
</div>
</div>

<div class="tab_set">
<ul class="tab_menu">
<li>タブ1</li><li>タブ2</li><li>タブ3</li>
</ul>
<div class="tab_box">
<div>タブボックス1</div>
<div>タブボックス2</div>
<div>タブボックス3</div>
</div>
</div>

</body>
</html>