Question

在试图寻找解决方案似乎很长时间之后，我认为现在是时候问专家了。

我已经为我的网站实现了jQuery选项卡，但是除了选择显示内容的选项卡之外，如果您单击页面上其他位置的标准html链接，我还希望能够显示不同的选项卡内容。

这里的页面可以看到http://www.luxury-spa-breaks.com/spa-deals-TEST.html，有问题的html链接是左下方的那些（例如，用户可以选择他们想要的标签，也可以从左侧选择一个区域，这样就可以了然后显示区域标签内容）。

这是我目前拥有的js：

$(document).ready(function() {

 //When page loads...
 $(".tab_content").hide(); //Hide all content
 $("ul.tabs li:first").addClass("active").show(); //Activate first tab
 $(".tab_content:first").show(); //Show first tab content

 //On Click Event
 $("ul.tabs li").click(function() {
  $("ul.tabs li").removeClass("active"); //Remove any "active" class
  $(this).addClass("active"); //Add "active" class to selected tab
  $(".tab_content").hide(); //Hide all tab content

  var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
  $(activeTab).fadeIn(2000); //Fade in the active ID content
  return false;
 });
});

非常感谢您的帮助！

安迪

Answer 1

添加相同功能的最简单方法是将tabs类添加到左侧边栏，或者添加一个选择器，选择侧边栏菜单到选项卡的选项卡。

此时我建议换掉你在那里重新编写另一个Stack Overflow问题的代码。通过符合最佳实践，它更高效，更清洁。

var tabContents = $(".tab_content").hide(),
    tabs = $("ul.tabs li, .anynavbar ul li"); // Second selector to match left hand sidebar

tabs.first().addClass("active").show();
tabContents.first().show();

tabs.click(function() {
    var $this = $(this),
        activeTab = $this.find('a').attr('href');

    if(!$this.hasClass('active') && activeTab.length > 1 && activeTab.indexOf('#') === 0){
        $this.addClass('active').siblings().removeClass('active');
        tabContents.hide().filter(activeTab).fadeIn();
    }

    return false;
});

通过执行上述任一操作，我们可以添加必要的事件处理程序以使标签更改。

我还编辑了代码，添加了一个简单的检查，用于有效的href值以用于HTML，其中一些锚点缺少正确的相应href值来激活正确的标签。另外，看看你现在正在使用的代码，你在});处理程序的末尾错过了document.ready，这就是代码无效的原因。

用于触发某些jQuery选项卡的HTML链接

1 个答案: