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通過使用超時在固定的小間隔中檢查散列來解決有問題的瀏覽器。