0

我有一组标签：

<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？

4

2 回答 2

0

我会修改你的代码添加一点

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

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

于 2013-07-05T04:10:40.923 回答
0

删除return false;. 该行告诉 jQuery 不要更改 URL；如果你确实想改变它，只需省略它。

于 2013-07-05T05:13:02.850 回答