都道府県穴埋めゲーム

ページの上下に同じタブメニューを付けたい

締切済

  • 質問者：no-but
  • 質問日時：
  • 回答数：2件

現在、wordpressにて、タブメニュー入りのページを作っていますが、添付の画像のように、ページの上下に、連動したタブメニューをつける方法を教えてください。
ちなみに、
ヘッダーに↓の記述をし、
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-tabs > ul > li' ) . click( function () {
var str = jQuery( 'input', this ) . val();
jQuery( '#jquery-sample-tabs > div' ) . not( str ) . css( 'display', 'none' );
jQuery( str ) . css( 'display', 'block' );
jQuery( this ) . css( { 'backgroundColor': '#F3F3F3', 'border-bottom': 'none' } );
jQuery( '#jquery-sample-tabs > ul > li' ) . not( this ) . css( { 'backgroundColor': '#f60', 'border-bottom': 'solid 1px #F3F3F3' } );
} ) . first() . click();
} );
// -->
</script>
cssに↓の記述をし、
#jquery-sample-tabs {
width:750px;
background:#F3F3F3;
}
#jquery-sample-tabs ul {
background:#000;
margin: 0;
padding: 5px 5px;
}
#jquery-sample-tabs ul li {
display: inline;
margin: 1px;
padding: 5px 20px;
border: solid 1px #888888;
border-radius: 5px 5px 0px 0px;
background-color: #F3F3F3;
cursor: pointer;
}
#jquery-sample-tabs div {
padding: 10px 15px;
}
HTMLに↓の記述をしています。
<div id="jquery-sample-tabs" class="jquery-sample-tabs">
<ul>
<li>
<input id="#jquery-sample-tab-1" type="hidden" value="#jquery-sample-tab-1-contents" />
タブ(1)
</li>
<li>
<input id="#jquery-sample-tab-2" type="hidden" value="#jquery-sample-tab-2-contents" />
タブ(2)
</li>
<li>
<input id="#jquery-sample-tab-2" type="hidden" value="#jquery-sample-tab-3-contents" />
タブ(3)
</li>
</ul>
<div id="jquery-sample-tab-1-contents">(1)の内容</div>
<div id="jquery-sample-tab-1-contents">(2)の内容</div>
<div id="jquery-sample-tab-1-contents">(3)の内容</div>
</div>

よろしくお願いします。

「ページの上下に同じタブメニューを付けたい」の質問画像
通報する

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

質問の本文を隠す

A 回答 (2件)

No.2

  • 回答者： fujillin
  • 回答日時：

No.1です。



ご提示のソースと画像がどうも合っていないような…

とりあえず、No.1の回答の具体例。原理的な部分のみです。。
角丸などの調整は適宜行なってください。

（全角空白は半角に）
<!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">
<!--
body{ background-color:#fff; }

ul.tabs, ul.tabs li{
　list-style-type:none;
　margin:0;
　padding:0;
}

ul.tabs li{
　padding:3px 20px;
　float:left;
　margin-right:2px;
　border:1px solid #999;
　background-color:#eee;
　cursor:pointer;
}
ul.tabs li.active{ color:#fff; background-color:#999; }

div#panels{ clear:left; background-color:#999; }
div.panel{ height:24em; }
//-->
</style>

<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
<!--
$(function(){
　$("ul.tabs>li").click(function(){
　　var num = $(this).parent().children("li").index(this);
　　$("ul.tabs").each(function(){
　　　$(">li",this).removeClass("active").eq(num).addClass("active");
　　});
　　$("div#panels .panel").hide().eq(num).show();
　}).first().click();
});
//-->
</script>
</head>
<body>

<ul class="tabs topTab">
<li>タブ(1)</li>
<li>タブ(2)</li>
<li>タブ(3)</li>
</ul>

<div id="panels">
<div class="panel">(1)の内容</div>
<div class="panel">(2)の内容</div>
<div class="panel">(3)の内容</div>
</div>

<ul class="tabs bottomTab">
<li>タブ(1)</li>
<li>タブ(2)</li>
<li>タブ(3)</li>
</ul>

</body>
</html>
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： fujillin
  • 回答日時：

回答がないようですので…




HTMLの後側に同じようなtabを設定してあげればよいでしょう。
ご提示のソースでは、ながいIDがたくさんふってありますが（笑）、IDがかぶつているので多分予定したようには動作しないのではないでしょうか。

スクリプトの処理で上下のタブにほぼ同じ処理をすることになるとおもいますが、jQueryを使うのなら同じセレクタで両方を処理できるようにしておいたほうが簡単だと思います。
また、わざわざ input type=hidden で表示パネルのIDを指定しているようですが、タブの数が増減したときに面倒な気がします。
基本的にタブと表示パネルとは順序が同じだと推測しますので、もしそうであるなら、IDは不要にすることができます。

具体的には、タブのULに class="tabs upper"、class="tabs under"などと設定しておいて、表示パネルのほうはその親要素に id="panels"などとしておくだけ。（名称は例です。タブは角丸や枠線の設定で、上下を区別する必要がありそうなので。）

処理としては、クリックされたLIの順番を取得し、その順のパネルを表示するとともにタブのLIに class="selected" を設定してあげるといった感じ。

li.selectedには、あらかじめCSSで色などを設定しておいてあげればよろしいかと思います。
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報