Javascript 基于链接URL激活jquery选项卡

我对jquery非常陌生，我决定构建一个jquery选项卡。到目前为止还不错，但我有一个小问题！！！我看不出如何根据URL激活选项卡。例如，当链接为www.myweb.com#tab2时，第二个tabber被激活。我的jquery如下所示

$(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(); //Fade in the active ID content
        return false;
    });

});

和HTML列表如下

<ul class="tabs">
    <li><a href="#tab1">Design Team</a></li>
    <li><a href="#tab2">Publications</a></li>
    <li><a href="#tab3">Awards &amp; Recognitions</a></li>
    <li><a href="#tab4">Our Mission</a></li>
    <li class="last-item"><a href="#tab1">Company Profile</a></li>
</ul>

---

现在，当有人使用此链接访问我的网站时，我希望激活tab3。我知道jQueryTabber有这个功能，但我不知道如何用我自己的jQueryTabber实现这个功能。如果您有任何帮助，我们将不胜感激。

请使用

href

属性等于

位置的项激活该项。hash

：

$(document).ready(function () {
   var hash = location.hash;
   $(".tab_content").hide(); //Hide all content
   if ($("ul.tabs li a[href='" + hash + "']").length) { //check if such link exists
      $("ul.tabs li a[href='" + hash + "']").parent().addClass("active"); //Activate tab
      $(hash).show();
   }
   else {
      $("ul.tabs li:first").addClass('active');
      $(".tab_content:first").show()
   }       
}

---

很简单。您可以根据哈希索引

触发
单击
事件

这对你有用。如果您在单击tab3后刷新页面，并且您的url包含哈希索引
#tab3
，则您的第三个选项卡将自动聚焦

我假设您的
li
或
a
标记及其中提琴中有一个id
tab1
、
tab2
、
tab3
、
tab4
。

在不影响现有代码的情况下，将这些代码添加到现有代码中，就完成了

$(function(){
    if(location.href.indexOf('#') != -1){
        var namedAnchor = window.location.hash;
        var findToTab = namedAnchor;
        $(findToTab).trigger('click');
    }
});

编辑：


但是，如果您不想为
li
或
a
标记分配任何ID，您可以这样做

$(function(){
    if(location.href.indexOf('#') != -1){
        var namedAnchor = window.location.hash;
        var findToTab = namedAnchor;
        $("ul.tabs li a[href='" + findToTab + "']").trigger('click');
    }
});

你想要在href链接中有tab3！！如果您在url中提供tab2，它将起作用。。顺便说一句，它与jquery无关，tabber提供了在页面内部导航的简单html超链接规则……是的，拼写错误修复了这一点。你现在能回答我的问题吗？这家伙说他不想要jquery的tabber，那么为什么要建议它呢？
Trigger
根据你的哈希位置点击事件。遵循这个答案。这是个打字错误对不起！我马上把它修好。同时，让我检查一下你做了什么，并希望它几乎可以解决问题，但这是我试图实现的逻辑。如果有#位置，激活该特定选项卡，或者激活第一个选项卡。由于jquery中没有if-else语句，我不知道如何实现这一点，它只适用于一个选择器。但是，我有3个选择器
ul#tabs li
，
ul#tabs li a
，
ul.tabs li a
，这是代码无法工作时的选择器。下面是if代码：
if（$（$（$）tabs li[href=“+hash+”））.length，$（$）（$（$）tabs li a[href=“+hash+”）.length，$（$）ul.tabs li a[href=“+hash+”）.length）{//检查这样的链接是否存在$（$（$（$）ul tabs li[href=“+hash+”）、ul tabs li a[href=”、ul tabs li a[href=“+hash+”）、ul tabs li[href=“+hash+”）.addClass（“active”）；//激活选项卡$（哈希）.show（）；}
然后考虑编辑您的问题。下次，具体说明你到底想做什么。哎哟，你不想帮我吗（我有3个选择器，
ul#tabs li
，
ul#tabs li a
，
ul.tabs li a
我该怎么做？如果你能为标签页提供完整的html，那么我可以分析并让它为你工作，并将解决方案发回给你。