同步導航欄內容引導

Question

我想知道是否有可能「同步」引導導航欄的內容，而不必編輯所有頁面上的導航欄。使用PHP這是相當容易使用類似<?php include 'navbar.php';?>但是，有幾個扭曲，我不能解決。

我現在navbar.php是：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href=".">Brand</a> </div> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
        ****<li class="active"><a href=".">Item 1<span class="sr-only"> (current)</span></a> </li> 
        <li class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
         <ul class="dropdown-menu" role="menu"> 
          <li><a href="#">Item 1</a> 
          </li> 
          <li class="divider"></li> 
          <li class="dropdown-header">Header</li> 
          <li><a href="#">Item 2</a> 
          </li> 
         </ul> 
        </li> 
        <li><a href="#">Item 2</a> </li> 
        <li><a href="#">Item 3</a> </li> 
       </ul> 
      </div> 
     </div> 
    </nav> 

我都用星號標記的線是和需要被添加到用戶當前所瀏覽網頁的active類的一個實例<span class="sr-only"> (current)</span>。有什麼辦法可以做到這一點？

感謝，

Tugzrida

Answer 1

作爲一個解決方案，您可以添加頁面名稱爲一類，以每立項目，然後在頁面加載，解析頁面名稱並設置活動類與頁面li元素名稱類。

水木清華這樣

<ul class="nav navbar-nav"> 
    <li class="active page1"><a href="page1.html">Item 1<span class="sr-only"> (current)</span></a> </li> 
    <li class="page2"><a href="page2.html">Item 2</a> </li> 
</ul> 


$(function() { 
    var path = window.location.pathname; 
    var page = path.split("/").pop(); 
    var pageName = page.substring(0, page.length - 5); // cut .html from the page 
    $('.' + pageName).addClass('active'); 
    $('.' + pageName).append('<span class="sr-only"> (current)</span>'); // add an element for a screenreader 
});