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

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

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

3 个答案: