同步导航栏内容引导

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 
});