显示选项卡的网址

Question

我写了一个代码，可以将li的类更改为活动状态并在点击时显示正确的内容，但我也希望能够链接访问者以示例：www.socal.nu/index.php ＃tab2激活tab2。

代码：

$(document).ready(function() { 

//Default Action 
$(".tab_content").hide(); 
$("ul.tabs li:first").addClass("active").show(); 
$(".tab_content:first").show(); 

//On Click Event 
$("ul.tabs li").click(function() { 
$("ul.tabs li").removeClass("active"); 
$(this).addClass("active"); 
$(".tab_content").hide(); 
var activeTab = $(this).find("a").attr("href"); 
$(activeTab).fadeIn(); 
return false; 
}); 

}); 

编辑，包括标签列表（X）HTML结构（如发表的OP在注释@slightlymore's answer）：

<ul class="tabs"> 
    <li><a href="#tab1">Hem</a></li> 
    <li><a href="#tab2">Projekt</a></li> 
    <li><a href="#tab3">Om SOCAL</a></li> 
    <li><a href="#tab4">Kontakt</a></li> 
</ul> 

Answer 1

为了让标签从URL中执行此操作：

var tab = window.location.hash; 

然后，您可以触发的点击事件具有a用适当的href：

var tab = window.location.hash; 

    // Fire click on the <li> that has the <a> with the proper 'href' attribute 
$("ul.tabs li:has(a[href=" + tab + "])").click(); 

或者你可以重用你的点击事件产生的功能，并且初始页面加载。

// Function that is used for click event and page load 
function loadTab() { 
    $("ul.tabs li").removeClass("active"); 
    $(this).addClass("active"); 
    $(".tab_content").hide(); 
    var activeTab = $(this).find("a").attr("href"); 
    $(activeTab).fadeIn(); 
    return false; 
} 

    // set up Click Event 
$("ul.tabs li").click(loadTab); 

var tab = window.location.hash; 

    // check to see if there was a tab in the location, and if 
    // so, call loadTab if from the context of the proper <li>. 
if($("ul.tabs li:has(a[href=" + tab + "])").length) { 
    loadTab.call($("ul.tabs li:has(a[href=" + tab + "])")[0]); 
} 

Answer 2

如果您给选项卡一个与您希望使用的'url'相关的ID，您可以添加一行到您的jQuery以使其工作。下面是一些例子HTML：

<ul class="tabs"> 
    <li id="tab-1">Tab number 1</li> 
    <li id="tab-2">Tab number 2</li> 
    <li id="tab-3">Tab number 3</li> 
</ul> 

如下然后更新您的jQuery：

$(document).ready(function() { 

    //Default Action 
    $(".tab_content").hide(); 
    $("ul.tabs li:first").addClass("active").show(); 
    $(".tab_content:first").show(); 

    //On Click Event 
    $("ul.tabs li").click(function() { 
     $("ul.tabs li").removeClass("active"); 
     $(this).addClass("active"); 
     $(".tab_content").hide(); 
     var activeTab = $(this).find("a").attr("href"); 
     $(activeTab).fadeIn(); 
     return false; 
    }); 

    // 'click' the tab with ID indicated in the URL 
    $('ul.tabs li' + location.hash).trigger('click'); 
}); 

或者 - 如果你不能更新的LI的ID用，你可以取代我增加了行以上与这一个：

//chop off the #tab bit from the URL, keeping the number at the end 
    var tab = location.hash.substring(4); 
    // 'click' the tab indicated in the URL 
    $('ul.tabs li:nth-of-type(' + tab + ')').trigger('click');