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

Question

当url为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的准备（函数（）。增加了一个身体onload="load_tab();" &删除if/else语句来完成这项工作。还在寻找一个固定的准备（函数（）

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

内工作

Answer 2

如果我理解你的权利，你需要深层链接为您的网页。
实现此目的的最简单方法是使用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的地址

Asuming您正在使用jQuery，你可以听onhashchange

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

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

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

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