
下記サイトを参考にタブメニューを作成しました。
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ベストアンサー
- 回答日時:
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
- 回答日時:
ご利用のライブラリは複数のタブにも対応し、イベント時のapiも用意されているみたいですので、
http://api.jqueryui.com/tabs/
スクリプトを解析してカスタマイズしなくてもすみそうな、一つのアイデアとして、
構造上は上と下のタブを別物で用意します。
下のタブはタブのみ表示して、コンテンツは見えないものとします。
イベントapiを利用して、「上のタブが変わった時に、下のタブを切り変える」、「下のタブが変わったときに、上のタブを切り変える」という上下を連動させるスクリプトを追加することで、見かけ上御質問のようにならないでしょうか?
この回答への補足
ご回答頂きどうもありがとうございます!
>イベントapiを利用して、「上のタブが変わった時に、下のタブを>切り変える」、「下のタブが変わったときに、上のタブを切り変>える」という上下を連動させるスクリプト
上記の連動させるようなスクリプトの方法にチャレンジしましたが、まだまだ勉強不足で方法が分からずうまくいきません。。
出来れば連動させるスクリプトをお教え頂けたら助かります。。
宜しくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JS <a></a>タグ内のリンク先ア...
-
jQueryでネスト構造の<li>がク...
-
DOM sort list table
-
タブ切り替えの初期表示について
-
jQueryでヒアドキュメントを使...
-
オンマウスで画像ロールオーバ...
-
SleniumBasicでコンパイルエラ...
-
MAX関数を使ってからLEFT JOIN...
-
1枚の画像をクリックすると複数...
-
透過pngの透明部分以外をクリッ...
-
クリックで背景変更するタグ
-
離れた場所にマウスオーバーで...
-
createElementで作成した要素を...
-
外部javascriptの重複を防ぐには
-
click範囲の指定
-
jQueryで特定のURLの時のみ表示
-
jspでcssが読み込めない
-
1枚の画像をクリックして複数の...
-
Webサイト作成 プログレスバー ...
-
他のPGMを呼び込むロジックにつ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
javascriptでEnterキーをtabキ...
-
同一ページ内で、任意の文字列...
-
ネストされたチェックボックス...
-
タブ切り替えの初期表示について
-
【javascript で動的に a タグ...
-
ドラックアンドドロップ?
-
SleniumBasicでコンパイルエラ...
-
gridstack.jsについて教えてく...
-
jqueryのsortableで一部ソート...
-
多階層ドロップダウンのスマホ...
-
マウスオーバーで開閉できるア...
-
jQueryでネスト構造の<li>がク...
-
質問に答えていくと、回答によ...
-
「jQuery」アコーディオンメニ...
-
複数のラジオボタン項目でのテ...
-
クリックした<a>タグのみにClas...
-
jquery ドロップダウンメニュー...
-
onmouseoverの表示切り替えが上...
-
jQuery タブメニューへのダイ...
-
<li></li>の数を制限
おすすめ情報