HTML链接触发某些jQuery选项卡 [英] HTML link to trigger certain jQuery tabs

问题描述

在试图找到解决方案很长时间之后，我认为是时候问专家了.

After what seems like a very long time trying to find a solution, I thought it's about time to ask the experts.

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

I have implemented jQuery tabs to my site, however as well as selecting a tab to show the content, I would also like to be able to show the different tabs content if you click on a standard html link elsewhere on the page.

可以在此处 http://www.luxury- spa-breaks.com/spa-deals-TEST.html 和有问题的html链接是左侧的链接(例如，用户可以选择所需的标签，也可以从左侧选择区域，然后将显示该区域的标签内容.

The page can be seen here http://www.luxury-spa-breaks.com/spa-deals-TEST.html and the html links in question are those down the left hand side (e.g. the user can either select the tab they want or select a region from the left hand side, which would then display that regions tab content).

这是我目前拥有的js:

This is the js I currently have:

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

非常感谢您的帮助！

安迪

推荐答案

添加相同功能的最简单方法是将tabs类添加到左侧边栏中，或者添加一个选择器，以选择侧边栏菜单到标签的选择器.

The easiest way to add the same functionality is to add the tabs class to the lefthand sidebar, or alternatively, add a selector that selects the sidebar menu to the selector for the tabs.

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

At this point I would suggest swapping out the code you have there for the one which I rewrote for another Stack Overflow question. It's more efficient and slightly cleaner by conforming to best practises.

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

通过以上任一操作，我们可以添加导致选项卡更改所需的事件处理程序.

By doing either of the above, we can add the event handlers necessary to cause the tabs to change.

我还编辑了代码，以简单检查有效的href值以用于HTML，其中某些锚点缺少正确的相应href值来激活正确的标签.另外，查看您当前正在使用的代码，您错过了document.ready处理程序结尾的});，这就是代码无法正常工作的原因.

I've also edited the code to add in a simple check for valid href values for use with your HTML, where some of the anchors lack the correct corresponding href values to activate the correct tabs. Also, looking at the code you're using right now, you've missed out a }); at the end for the document.ready handler, which is why the code isn't working.

这篇关于HTML链接触发某些jQuery选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！