當某些鏈接相同時，當前選定的項目

Question

我正在嘗試創建一個疊加的導航列表，其中突出顯示了您選擇的項目。它看起來像這樣。

<div class="page-list"> 
    <ul class="nav nav-pills nav-stacked"> 
     <li><a href="Page1.html" > Page1 </a></li> 
     <li><a href="Page2.html" > Page2 </a></li> 
     <li><a href="Page3.html" > Page3 </a></li> 
     <li><a href="Page4.html" > Page4 </a></li> 
     <li><a href="Page5.html" > Page5 </a></li> 
     <li><a href="Unavailable.html" > Page6 </a></li> 
     <li><a href="Unavailable.html" > Page7 </a></li> 
    </ul> 
</div> 

我遇到的問題是，最後兩頁共享相同的鏈接，我似乎無法得到的只是所選擇的頁面，在列表中突出顯示。

我正在使用這個用於我的JavaScript。

<script> 
    $(function(){ 
     $('a').each(function() { 
      if ($(this).prop('href') == window.location.href) { 
       $(this).addClass('current'); 
      } 
     }); 
    }); 
</script> 

但是，這會導致同一頁面的所有鏈接突出顯示。

我試着解決這個問題，但現在點擊時沒有鏈接突出顯示。

<script> 
    $(".page-list a").click(function() { 
     $(this).parent().previoussibling().find('a').removeClass('current'); 
     $(this).addClass("current"); 
    }); 
</script> 

Answer 1

解決此問題的一種方法是創建一個查詢字符串，以指示應該突出顯示哪個鏈接。

... 
<li><a href="Unavailable.html?page=6" > Page6 </a></li> 
<li><a href="Unavailable.html?page=7" > Page7 </a></li> 
... 

然後在Javascript中，閱讀查詢字符串，並決定要突出哪個頁面。 This StackOverflow question可以幫助您閱讀查詢字符串。

如果您不希望用戶看到www.yourwebsite.com/Unavailable.html?page=7，也可以使用cookie來實現此目的。請參閱this tutorial在JavaScript中使用Cookie。如果你喜歡這條路線，有許多圖書館可以幫助你使用cookies。

以往方式，你選擇哪一個傳遞到下一個頁面中的信息，你將需要添加一個id到a標籤（或其他方式來唯一地標識每個鏈接），這樣可以突出相應的鏈接。

下面是使用查詢字符串想法的例子：

<div class="page-list"> 
    <ul class="nav nav-pills nav-stacked"> 
     ... 
     <li><a id="6" href="Unavailable.html?page=6" > Page6 </a></li> 
     <li><a id="7" href="Unavailable.html?page=7" > Page7 </a></li> 
    </ul> 
</div> 

<script> 
    $(function(){ 
     $('a').each(function() { 
      if ($(this).attr('id') == getParameterByName('page')) { 
       $(this).addClass('current'); 
      } 
     }); 
    }); 

    function getParameterByName(name) { 
     //this code is taken directly from https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript#answer-901144 
     name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); 
     var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), 
      results = regex.exec(location.search); 
     return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); 
    } 
</script>