ページの上下に同じタブメニューを付けたい
現在、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>
よろしくお願いします。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
お礼が送れて大変すみません。 なるほど・・・、端末によって問題なかったりしたので、参考にさせていただき、背景色・文字色を設定しました。 アドバイス本当にありがとうございました。