0

mypage.php#tab3当 url 是或默认加载第一个选项卡时，如何重新加载查看的最后一页（重新加载后） ？请注意尝试将 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>
4

2 回答 2

1

如果我对您的理解正确，则您的页面需要深度链接。
实现这一点的最简单方法是使用 jQuery 地址。你可以从这里得到它

检查这个例子 - 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 在有问题的浏览器上解决了这个问题，方法是使用超时以固定的小间隔检查哈希。

于 2012-09-11T18:36:57.483 回答
0

找到了 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();
}
于 2012-09-11T23:00:35.590 回答