顯示刷新的最後一個活動div JS

我在顯示/隱藏div的單頁網站上有一個相當基本的導航選項卡。但是，當我刷新頁面時，它會返回到登錄「頁面」div，而不是停留在當前選項卡上。我使用以下JS標籤之間切換，我想用這種方法，如果可以保持：顯示刷新的最後一個活動div JS

var links = document.getElementById('navs').getElementsByTagName('a'); 

for(var i = 0, link; link = links[i]; i++) { 
    link.onclick = showContent; 

    // Hide content divs by default 
    var contentdiv = getContentDiv(link) 
    if (contentdiv == null){ 
     continue; 
    } 
    contentdiv.style.display = 'none'; 
} 

// Show the first content div 
if(links.length > 0) showContent.apply(links[0]); 
var current; 

function showContent() { 

    // hide old content 
    if(current) current.style.display = 'none'; 

    current = getContentDiv(this); 
    if(!current) return true; 

    current.style.display = 'inline-block'; 

    return true; 

} 

function getContentDiv(link) { 

    var linkTo = link.getAttribute('href'); 
    console.log(linkTo); 

    // Make sure the link is meant to go to a div 
    if(linkTo.substring(0, 2) != '#!') return; 
    linkTo = linkTo.substring(2); 
    return document.getElementById(linkTo); 

}

我知道這將刷新因爲 if(links.length > 0) showContent.apply(links[0]); 但是登陸DIV，我希望用這個方法和存儲在一個變量稱爲current_link鏈接迭代次數，然後能夠調用if(links.length > 0) showContent.apply(links[current_link]);甚至if(links.length > 0) showContent.apply(current_link);

我已經嘗試了幾種方法，但它最終只是節省無論是在導航欄上的第一個或最後一個標籤。此外，頁面刷新到默認div，但url保持不變。 EX。網址是http://example.com/#!tab1即使網頁顯示http://example.com/#!home

這是HTML：

<nav class="navbar navbar-fixed-top" id= "navs" role="navigation"> 
     <div class="container"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
       <div class="navbar-header"> 
        <div class="navbar-brand"> 
         <a id="logo" href="#!home"><img id="logo-pic" src="images/name.png" alt="" width="50%" height="auto"></a> 
        </div> 
       </div> 
       <!-- Collect the nav links, forms, and other content for toggling --> 
       <div class="navbar" id="navbar-collapse-1"> 
         <ul class="nav navbar-right navbar-nav"> 
          <a href="#!home"></a> 
          <li class="dropdown"> 
           <a href="#!tab1">tab1</a> 
          </li> 
          <li> 
           <a class="dropdown-toggle" data-toggle="dropdown" href="#">tab2</a> 
             <ul class="dropdown-menu dropdown-menu-right pull-center"> 
              <li><a href="#!tab21">tab21</a></li> 
              <li><a href="#!tab22">tab22</a></li> 
             </ul> 
          </li> 
          <li> 
           <a class="dropdown-toggle" data-toggle="dropdown" href="#">tab3</a> 
             <ul class="dropdown-menu dropdown-menu-right pull-center"> 
              <li><a href="images/about/Resume2016.pdf" target="_blank">resume</a></li> 
              <li><a href="#!tab31">tab31</a></li> 
              <li><a href="#!tab32">tab32</a></li> 
             </ul> 

          </li> 
          <li> 
           <a href="#!tab4">tab4</a> 
          </li> 
          <li> 
           <a href="#!tab5">tab5</a> 
          </li> 
         </ul> 
       </div> 
      </div> 
     <!-- /.container --> 
</nav>

來源

2017-05-04 Sarika Halarnakar

堅持頁的狀態，最好的辦法是利用URL歷史記錄。

E.g.當用戶點擊一個選項卡上，而不是僅僅做導航：

創建hashchange事件處理

window.onhashchange =() => { ... };

或：

window.addEventListener('hashchange',() => ...);

所以你可能會這樣做：

const navigate =() => open_tab(location.hash.substr(1)); // get rid of the '#' 
window.addEventListener('hashchange', navigate);

您還需要導航時，頁面加載：

navigate();

現在，當用戶單擊選項卡，或什麼的，更改頁面位置的哈希：

location.hash = "tab1";

這是一個額外的工作，但好處是巨大的：

刷新頁面按預期工作
如果用戶用書籤的頁面，他們的書籤UI
前進的狀態和後退導航現在正常工作。

來源

2017-05-04 18:07:09 podperson

顯示刷新的最後一個活動div JS

回答

相關問題