１ページ内に　複数のタブボックスを設置

解決済

質問者：iguigu_n
質問日時：2014/09/05 13:53
回答数：1件

１ページ内に　複数のタブボックスを設置するために、下記のようなコードを記載しました。
おそらく最後の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>

通報する

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

質問の本文を隠す

回答 (1件)

No.1ベストアンサー

回答者： wasp500jp
回答日時：2014/09/05 14:19

　１ページ内に　複数のタブボックスを設置するために・・・

　あの～何が問題なのか判りかねますが、私なりに解釈して回答してみますが、一枚のウィンドウにタブを表示させたいのでしょうか？OSもわかりません。もし、WIN７でしたら Internet Explorer を起動してツール、インターネットオプションをクリックするとプロパティダイアログの中心にタブとあります。これをクリックして、内容をよくみて「常に新しいタブで開く」にチェックを入れると新しいウィンドウが開かない代わりに新しいタブが開きます。質問の主旨はこういったことでしょうか。
　仲々お詳しいようなので、HTMLタグは私にはさっぱりです。