jquery选项卡,基于URL可见

Question

我使用基于http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/的 jquery和标签

<script type="text/javascript">
    $(function() {
        $(".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#menu li").click(function() {
        $("ul#menu 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 rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;
        });
    });
</script>

是否可以根据URL(page.html#tab4等)中的值进行调整,以显示相应的选项卡？

我相信它的当前状态它不起作用,因为它返回false,那

var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content

正在寻找锚值,而不是URL.

希望这是有道理的.

我(想)如果可以修复,我需要一种方法从URL获取#tab以及基于单击的Anchor.

谢谢

Answer 1

您可以使用它window.location.hash来检索#somethingURL 的一部分.请参阅:https://developer.mozilla.org/en/window.location

此外,您发布的代码...可能是一个很好的列表,不能在jQuery中做什么.让我们为您解决一下:

$(function() {
    var tabContent = $(".tab_content");
    // Modified tutorial's code for this
    var tabs = $("#menu li");
    var hash = window.location.hash;

    tabContent.not(hash).hide();
    tabs.find('[href=' + hash + ']').addClass('active');

    tabs.click(function() {
        $(this).addClass('active').siblings().removeClass('active');
        tabContent.hide();
        var activeTab = $(this).find("a").attr("href");

        $(activeTab).fadeIn();
        return false;
    });
});