Question

我有一组标签：

<ul class="tabs">
    <li><a href="#tab1">Data Pribadi</a></li>
    <li><a href="#tab2">Pengangkatan</a></li>
    <li><a href="#tab3">Lampiran</a></li>
</ul>
<div id="tab1" class="tab_content">
    tabs1
</div>
<div id="tab2" class="tab_content">
    tabs2
</div>
<div id="tab3" class="tab_content">
    tabs3
</div>

每个标签都有唯一的ID。当我点击ID为tab1的标签时，我希望该网页的网址更改为http://www.example.com/#tab1。我希望每个其他标签都会发生类似的事情。我正在使用这个JavaScript代码：

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

如果您可以点击标签并更改内容，it works。但是，当我单击其中一个链接以更改选项卡时，URL不会更改。为什么会这样，以及如何按照我的预期更改URL？

Answer 1

我稍微修改你的代码

    if ($(this).attr("class")!='active') {
    // all other code here
    }

只是在它已经打开时不要褪色，但一切似乎都在起作用：demo

Answer 2

删除return false;。该行告诉jQuery不要更改URL;如果你做希望它改变，只需省略它。

单击选项卡时为什么URL不会更改？

2 个答案: