タブメニューを上下に設置

質問

下記サイトを参考にタブメニューを作成しました。
http://5am.jp/jquery/jquery_ui_tabs/

こちらのタブを上下に配置し、selectされた状態も連動させたいと思っています。
スクリプトをどのように
すればいいかお分かりの方がおられましたら
ご教授頂けませんでしょうか。

<script type="text/javascript">
$(function() {
$('#ui-tab > ul').tabs({ fx: { opacity: 'toggle', duration: 'normal' } });
});
</script>

<div id="tabs">
<ul>
<li><a href="#tab1"><span>タブ1</span></a></li>
<li><a href="#tab2"><span>タブ2</span></a></li>
<li><a href="#tab3"><span>タブ3</span></a></li>
</ul>

<div id="tab1">
<p>タブ1の内容</p>
</div>

<div id="tab2">
<p>タブ2の内容</p>
</div>

<div id="tab3">
<p>タブ3の内容</p>
</div>
　　　　　　<ul　class="bottom_tab">
<li><a href="#tab1"><span>タブ1</span></a></li>
<li><a href="#tab2"><span>タブ2</span></a></li>
<li><a href="#tab3"><span>タブ3</span></a></li>
</ul>
</div>

どうぞ宜しくお願いいたします。

回答No.2

fujillin · ベストアンサー

ANo1です。

情報はNo1にあげたドキュメントだけなので、片方のタブをクリックしたら、他方をスクリプトからクリックするという案を考えました。
ただし、この方法だと延々とイベントが発生しかねないのですが、幸い、もとのライブラリでは開いた状態のタブをクリックしてもイベンが発生しないようですので、問題はなさそうです。

とりあえず、以下のスクリプトでテストしてみました。
　$(function(){
　　var ids = ["upperTab", "lowerTab"];
　　$(ids).each(function(i){
　　　$("#" + this).tabs({
　　　　activate : function(e,ui){
　　　　　var n = ui.newTab.parent().children("li").index(ui.newTab);
　　　　　$("#" + ids[1-i] + " li").eq(n).find("a").click();
　　　　}
　　　});
　　});
　});

タブが上に付くようにＣＳＳが設定されているので、調整が必要かもしれません。

お礼

ありがとうございます！！！　CSSの調整も含めてテストしてますが、なんとか思ったようにいけそうです。
感謝いたします！！

回答No.1

fujillin

ご利用のライブラリは複数のタブにも対応し、イベント時のapiも用意されているみたいですので、
http://api.jqueryui.com/tabs/

スクリプトを解析してカスタマイズしなくてもすみそうな、一つのアイデアとして、

構造上は上と下のタブを別物で用意します。
下のタブはタブのみ表示して、コンテンツは見えないものとします。

イベントapiを利用して、「上のタブが変わった時に、下のタブを切り変える」、「下のタブが変わったときに、上のタブを切り変える」という上下を連動させるスクリプトを追加することで、見かけ上御質問のようにならないでしょうか？

補足

ご回答頂きどうもありがとうございます！

＞イベントapiを利用して、「上のタブが変わった時に、下のタブを＞切り変える」、「下のタブが変わったときに、上のタブを切り変＞える」という上下を連動させるスクリプト

上記の連動させるようなスクリプトの方法にチャレンジしましたが、まだまだ勉強不足で方法が分からずうまくいきません。。

出来れば連動させるスクリプトをお教え頂けたら助かります。。

宜しくお願いいたします。