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

【问题标题】：Overriding default jQuery UI tab from link on other page从其他页面上的链接覆盖默认的 jQuery UI 选项卡
【发布时间】：2009-09-14 12:37:38
【问题描述】：

我目前在我正在开发的网站的主页上使用 jQuery UI 选项卡 (v1.7x)，它们的设置如下：

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

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

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

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

亚历克斯

【问题讨论】：

标签： jquery user-interface hyperlink tabs selected

【解决方案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 });

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

【讨论】：

【解决方案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'}    

});

});

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

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

【讨论】：

【解决方案3】：

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

【讨论】：