jquery - 从其他页面上的链接覆盖默认的 jQuery UI 选项卡

Question

我在我目前正在处理的网站的主页上使用 jQuery UI 选项卡（v1.7x），它们的设置如下：

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

页面加载时一切正常，并且我希望默认显示的选项卡按原样显示 - 但是，我想从网站上的单独页面链接到其他一些选项卡，无需假设我使用哈希链接（即“/#panel1”），上面代码中的“selected”属性会拦截它并覆盖所有内容！

我只是想知道是否有一种简单的方法可以在加载时在主页上显示默认选项卡（索引 4），但通过其他页面的链接选择不同的选项卡？

我期待听到任何人对此的想法！

亚历克斯

Answer 1

亚历克斯，

我修改了你上面写的内容，这样它就可以工作而不必明确说明预期值（更灵活）。

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 });

在我的页面上工作正常。:)

Answer 2

感谢有关查询字符串的建议 - 这促使我寻求以下解决方案：

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'}    

});

}); 

它不是非常优雅，但是嘿，它有效！

如果有人能想到更好的方法，我很想听听！

Answer 3

您可以向具有选项卡控件的页面添加一个查询字符串选项，然后将索引注入页面服务器端:)