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

发布于 2024-08-04 11:57:01 字数 425 浏览 8 评论 0原文

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

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

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

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

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

亚历克斯

原文

I am using jQuery UI tabs (v1.7x) on the home page of a site I'm working on at the moment, and they are set up as follows:

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

It's all working great when the page loads, and the tab I want to be displayed by default is displayed as it should be - however, I'd like to link to some of the other tabs from separate pages on the site, and needless to say if I use a hash link (i.e. "/#panel1"), the "selected" attribute in the above code intercepts it and overrides everything!

I was just wondering if there was an easy way to display the default tab (index 4) on the home page on load, but select different tabs via links from other pages?

I look forward to hearing anyone's thoughts on this!

Alex

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

花开柳相依 2024-08-11 11:57:01

亚历克斯，

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

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

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

Alex,

I modified what you had written above so that it will work without having to explicitly state the expected values (more flexible).

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

Works alright on my pages. :)

回复收藏 0 原文

掐死时间 2024-08-11 11:57:01

感谢您关于查询字符串的建议 - 这促使我采用以下解决方案：

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

});

});

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

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

Thanks for the suggestion about querystrings - This prompted me to go for the following solution:

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

});

});

It's not hugely elegant, but hey, it works!

If anyone can think of a better way, I'd love to hear about it!

回复收藏 0 原文