2017-05-31 61 views
1

我開發一個jQuery的網站,有一個頂部菜單通過div的導航後。我希望它保持與刷新頁面前相同的選項卡。保持相同選項卡上的刷新

菜單代碼

<ul class="menu" id="menu"> 
    <li class="menu-text"><h4>Title</h4></li> 
    <li class="current"><a href="#1" data-id="div1">Menu1</a></li> 
    <li><a href="#2" data-id="div2">Menu2</a></li> 
    <li><a href="#3" data-id="div3">Menu3</a></li> 
</ul> 

內容div的

<div class="pbox" id="div1"> ... </div> 
<div class="pbox" id="div2"> ... </div> 
<div class="pbox" id="div3"> ... </div> 

jQuery的

var menu = $('#menu'); 
menu.on('click', 'a', function() { 
    var current = $(this).closest('li'); 
    if(!current.hasClass("current")){   
    $('.current').removeClass('current'); 
    current.addClass("current"); 

    var id = $(this).attr('data-id');  
    $('.pbox:visible').hide(600); 
    $('#' + id + '.pbox').show(600); 
    history.pushState(null, null, '#' + id); 
    } 
}); 

var menuId = location.hash.substring(1); 
if (menuId) { 
    $(menu, "li a[data-id='" + menuId + "']").trigger('click'); 
} 

唯一的問題是日在當我刷新頁面的URL 仍然相同的(如果我是第二個選項卡上,我刷新頁面,鏈接爲:的index.php#2),但「重定向」到第一個選項卡(#1) 。

任何建議嗎?

回答

1
  • 你可以把查詢參數的URL,可以很容易讓你 明白這是最後一個活動標籤。
  • 另一種選擇是使用localStorage的節省就是最後點擊選項卡,並從在頁/插件加載存儲收到

第一個是簡單,這裏介紹: https://www.w3schools.com/jsref/prop_loc_hash.asp

function myFunction() { 
    location.hash = "part5"; 
    var x = "The anchor part is now: " + location.hash; 
    document.getElementById("demo").innerHTML = x; 
} 

第二個,你可以在這裏找到: https://developer.mozilla.org/en/docs/Web/API/Window/localStorage 本地存儲方式:

if (typeof(Storage) !== "undefined") { 
    // Store 
    localStorage.setItem("lastname", "Smith"); 
    // Retrieve 
    document.getElementById("result").innerHTML = localStorage.getItem("lastname"); 
} else { 
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage..."; 
+0

感謝馬丁的快速回答。如果我使用第一種方法,我可以將其設置爲像'localStorage.setItem(「lastDiv」,菜單Id);'?我從來沒有使用過這種方法,但它看起來像我想要的。在我設置它之後,我需要把它弄對嗎?我可以使用方法'localStorage.getItem'嗎? – Bruno

+0

它是的,我已經添加代碼 - 直出W3 –

+0

的我看到了馬丁。但我的問題是不檢索URL#。我的問題是,網站必須在刷新頁面之前進入用戶的最後一個標籤。如果你看到我的jQuery代碼,你會發現,我已經acomplish,通過做'VAR菜單Id = location.hash.substring(1)'。它已經存儲了訪問的最後一個標籤。 – Bruno

相關問題