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

要从网址获取标签，请执行以下操作：

var tab = window.location.hash;

然后，您可以触发li具有a的{{1}}的点击事件：

href

或者您可以重复使用为click事件创建的函数以及初始页面加载。

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

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

ALTERNATIVELY - 如果您无法更新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');

显示带有网址的标签

2 个答案: