jQuery 选项卡和页面重新加载 - 显示最后使用的选项卡答案

【问题标题】：jQuery Tabs and Page Reload - Show last used tabjQuery 选项卡和页面重新加载 - 显示最后使用的选项卡
【发布时间】：2012-09-11 18:22:11
【问题描述】：

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

下面的代码具有预期的效果，除了对于'active'类。含义：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>

【问题讨论】：

标签： jquery tabs

【解决方案1】：

如果我的理解正确，您的网页需要深层链接。
实现这一点的最简单方法是使用 jQuery 地址。你可以从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 在有问题的浏览器上解决了这个问题，方法是使用超时以固定的小间隔检查哈希。

【讨论】：

谢谢。你能在没有插件的情况下提出建议吗？
是的。检查我的帖子编辑部分。

【解决方案2】：

找到了 jQuery ready(function() 的替代方法。添加了一个主体 onload="load_tab();" 并删除了 if/else 语句以使其工作。仍在寻找在 ready(function() 中工作的修复程序

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();
}

【讨论】：