Question

我对jquery很新，我决定构建一个jquery tabber。到目前为止这么好，但我有一点问题！我无法看到如何根据URL激活tabber。例如，当链接是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>

现在当有人使用此链接www.mywebsite.com#tab3访问我的网站时，我希望激活tab3。我知道jquery tabber有这个，但我不知道如何用我自己的jquery tabber实现这一点。任何帮助将不胜感激

Answer 1

激活href属性等于location.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()
   }       
}

Answer 2

非常简单。您可以根据哈希索引trigger click事件。

这对你有用。如果您在点击say tab3后刷新页面并且您的网址包含哈希索引#tab3，则您的第三个标签将自动关注。

我认为您的tab1或tab2标记中包含tab3，tab4，li，a及其中提琴。
将这些代码添加到现有代码中而不会影响它们，您就完成了。

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

根据链接URL激活jquery tabber

2 个答案: