2

現在作業中のサイトのホームページで jQuery UI タブ (v1.7x) を使用しており、次のように設定されています。

jQuery(document).ready(function($) {
$("#mastheadhome").tabs({
selected:4,
fx: {opacity: 'toggle'} 
});
});

ページが読み込まれるとすべてうまく機能し、デフォルトで表示したいタブが表示されるはずですが、サイトの別のページから他のタブのいくつかにリンクしたいと思います。たとえば、ハッシュ リンク (つまり、"/#panel1") を使用すると、上記のコードの "selected" 属性がそれをインターセプトし、すべてをオーバーライドします。

読み込み時にホームページにデフォルトのタブ (インデックス 4) を表示する簡単な方法があるかどうか疑問に思っていましたが、他のページからのリンクを介して別のタブを選択しますか?

これについて誰かの考えを聞くのを楽しみにしています！

アレックス

4

3 に答える 3

2

アレックス、

上記の内容を修正して、期待値を明示的に指定しなくても機能するようにしました (より柔軟に)。 

var show_tab = location.hash;
var divs = [];
var index;
$('.tabs > div').each(function() { divs.push('#'+this.id); });
for (i=0; i < divs.length; i++) {
 if (show_tab == divs[i]) {
  index = i;
  break; // found a match, break
 } else {
  index = 0; // default tab
 }
}
$('.tabs').tabs({ selected: index });

私のページで問題なく動作します。:)

于 2009-10-12T22:42:08.403 に答える
1

クエリ文字列についての提案をありがとう - これにより、次の解決策に進むようになりました。

jQuery(document).ready(function($) { 

var tabshown = location.hash; 
var index; 
switch(tabshown) { 
case "#panel1": 
index = 0
break; 
case "#panel2": 
index = 1
break; 
default: 
index = 4 } 

$("#mastheadhome").tabs({ selected:index, fx: {opacity: 'toggle'}    

});

});

それほどエレガントではありませんが、動作します!

誰かがより良い方法を考えることができるなら、私はそれについて聞きたいです!

于 2009-09-14T17:13:33.600 に答える
0

タブコントロールを持つページにクエリ文字列オプションを追加し、インデックスをページサーバーサイドに挿入できます:)

于 2009-09-14T16:48:57.717 に答える