javascript - 基于查询字符串的活动选项卡

Question

我已经创建了 jquery 选项卡。

    <div id="tabs_container">
        <ul id="tabs">
            <li class="active"><a href="#tab1">Allgemeines</a></li>
            <li><a href="#tab2">Kontakt</a></li>
            <li><a href="#tab3">Musik</a></li>
            <li><a href="#tab4">Hauptfoto</a></li>
            <li><a href="#tab5">Einstellungen</a></li>
        </ul>
    </div>
    <div id="tabs_content_container">
        <div id="tab1" class="tab_content" style="display: block;">
            <?php include('1.php'); ?>
        </div>
        <div id="tab2" class="tab_content">
            <?php include('2.php'); ?>
        </div>
        <div id="tab3" class="tab_content">
            <?php include('3.php'); ?>
        </div>
        <div id="tab4" class="tab_content">
            <?php include('4.php'); ?>
        </div>
        <div id="tab5" class="tab_content">
            <?php include('5.php'); ?>
        </div>
    </div>
</div>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
    $("#tabs li").click(function() {
        //  First remove class "active" from currently active tab
        $("#tabs li").removeClass('active');

        //  Now add class "active" to the selected/clicked tab
        $(this).addClass("active");

        //  Hide all tab content
        $(".tab_content").hide();

        //  Here we get the href value of the selected tab
        var selected_tab = $(this).find("a").attr("href");

        //  Show the selected tab content
        $(selected_tab).fadeIn();

        //  At the end, we add return false so that the click on the link is not executed
        return false;
    });
});
/* ]]> */
</script>

我需要从 url 中选择标签，这意味着如果http://example.com/settings.php#tab2

选项卡 2 一个活动选项卡。#tab3 然后选项卡 3 是一个活动选项卡。我怎样才能做到这一点？

Answer 1

$(document).ready(function(){
  $(".active").removeClass("active");
  $(document.location.hash).addClass("active");
});

Answer 2

window.onhashchange

使用上面的本机代码。它会在 url 中发生哈希更改时触发

window.onhashchange=function(){
if(document.location.hash ==="#tab2"){
//write your code here
}


}

希望它会有所帮助。

Answer 3

http://jsfiddle.net/AavsW/21/

$('#wizard').tabs({ disabled: [1, 2] });

试试这个我希望它能解决你的问题