单击选项卡时，为什么URL没有更改？

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的选项卡时，我希望页面的URL更改为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;
    });
});

只要您可以点击某个标签并进行内容更改， 它就可以正常工作 。 但是，当我单击其中一个链接以更改选项卡时，URL不会更改。 为什么会这样，如何按预期更改URL？

Answer 1

我会稍微修改一下您的代码

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

只是在它已经打开时不使其褪色，但是一切似乎都在起作用： 演示

Answer 2

删除return false; 。 该行告诉jQuery不要更改URL。 如果您确实希望更改它，只需将其忽略即可。