0

我对 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 实现这一点。任何帮助将不胜感激

4

2 回答 2

0

很简单。您可以trigger click根据您的哈希索引进行事件。

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

我假设您的or标签及其中提琴 中有一个 id tab1, tab2, tab3, 。将这些代码添加到您现有的代码中而不影响它们，您就完成了。tab4lia

$(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');
    }
});
于 2013-03-29T15:24:27.630 回答
0

激活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()
   }       
}
于 2013-03-29T13:31:44.107 回答