旅行好きのおしりトラブル対策グッズ3選

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>

このQ&Aに関連する最新のQ&A

A 回答 (1件)

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



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

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング