HTML链接触发某些jQuery选项卡

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类添加到左侧边栏，或者添加一个选择器，该选择器选择侧边栏菜单到标签的选择器。

在这一点上，我建议将您那里的代码换成我为另一个堆栈溢出问题重写的代码。 通过遵循最佳实践，它会更高效，更干净。

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处理程序，这就是为什么代码无法正常工作的原因。