Question

当网址为mypage.php#tab3或默认加载第一个标签时，如何重新加载查看的最后一页（重新加载后）？请注意尝试将id添加到li链接并捕获哈希。

以下代码具有所需的效果，除了用于“有效”类。含义：div在错误的选项卡下可见。谢谢你的建议。

<script type="text/javascript">
$(document).ready(function(){
    $(".tabContents").hide();                                       // Hide all tab content divs by default
    if (window.location.hash)
        $(".tabContents").filter(window.location.hash).show();      // Show the div with hash in url
    else
        $(".tabContents:first").show()                              // Show the first div of tab content by default

    $("#tabContainer ul li a").click(function(){                    // Fire the click event         
        var activeTab = $(this).attr("href");                       // Catch the click link
        $("#tabContainer ul li a").removeClass("active");       // Remove pre-highlighted link
        $(this).addClass("active");                             // Set clicked link to highlight state
        $(".tabContents").hide();                                   // Hide currently visible tab content div
        $(activeTab).fadeIn();                                      // Show the target tab content div by matching clicked link.
    });
});
</script>
....
<div id="tabContainer">
    <ul>
        <li><a class="active" href="#tab1" id="tab1">Purchase</a></li>
        <li><a href="#tab2" id="tab2">Sales</a></li>
        <li><a href="#tab3" id="tab3">Transactions</a></li>
    </ul>

    <div id="tab1" class="tabContents">
        <h1>Purchase</h1>
        ... content ...
    </div>
    <div id="tab2" class="tabContents">
        <h1>Sales</h1>
        ... content ...
    </div>
    <div id="tab3" class="tabContents">
        <h1>Transactions</h1>
        ... content ...
    </div>
</div>

Answer 1

如果我理解你，你的页面需要深层链接 最简单的方法是使用jQuery Address。您可以从HERE

获取

选中此示例 - http://www.asual.com/jquery/address/samples/api/

这是有据可查的，但这是一个简单的例子。

$.address.change(function(event) {
    var pathNames = event.pathNames;
    // <<< Your code here.  >>>
    //PathNames is the array with all path elements from the anchor.
});

编辑：没有jQuery地址

假设您正在使用jQuery，您可以收听 onhashchange

$(window).hashchange(function(){
    alert(location.hash);
});

这将捕获任何锚更改，但浏览器默认行为会出现问题。所有与不存在的锚点的链接都会跳转到页面顶部。你不想要这个，所以为了解决你想要使用的每个链接，请点击监听器并返回false来解决默认行为。
不要忘记手动更改锚点。

$('a.deep-linking').click(function(){
    window.location.hash = a.attr('hash');
    return false;
});

这可以通过简单的JavaScript实现吗？
简短的回答是肯定的，但你必须再写一些代码。您将遇到的主要问题是 onhashchange ，因为它在IE6 / IE7中不受支持。
jQuery通过使用超时来检查有问题的浏览器，以固定的小间隔检查哈希值。

Answer 2

找到jQuery ready的一个替代方法（function（）。添加了一个正文onload="load_tab();"并删除if / else语句以使其工作。仍在寻找修复工作在ready（function（）< / p>

function load_tab() {
    if (window.location.hash) {
        var t = window.location.hash.substr(4)-1;
        var i = window.location.hash;
    }
    else {
        var t = '0';
        var i = '#tab1';
    }

    $(".tabContents").hide();                        // Hide all tab content divs by default
    $('#tabContainer ul li a:eq('+t+')').addClass("active");    // Set highlight state
    $(i).show();
}

jQuery选项卡和页面重新加载 - 显示上次使用的选项卡

2 个答案: