- 締切済み
ページの上下に同じタブメニューを付けたい
現在、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> よろしくお願いします。
- no-but
- お礼率0% (0/2)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
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>
- fujillin
- ベストアンサー率61% (1594/2576)
回答がないようですので… 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で色などを設定しておいてあげればよろしいかと思います。
