Создать файл меню с динамическими вкладками

Question

Я пытаюсь сделать меню своего сайта только в одном файле и просто включить его на остальные страницы .html. Я копирую и вставляю меню каждый раз, когда создаю новую страницу, потому что хочу, чтобы активная вкладка была подсвечена для каждой отдельной страницы. Именно по этой причине я не могу сделать один файл только для каждой страницы, и я понятия не имею, как заставить его работать, чтобы активировать вкладку на каждой странице.

Это код, который я скопировал на каждой странице.

<!-- BEGIN MENU --> 
    <section id="menu-area"> 
     <nav class="navbar navbar-default" role="navigation"> 
      <div class="container"> 
       <div id="navbar" class="navbar-collapse collapse"> 
        <ul id="top-menu" class="nav navbar-nav navbar-right main-nav"> 
         <li><a href="index.php">Home</a></li> 
         <li><a href="404.php">Downloads</a></li> 
         <li><a href="404.php">Media</a></li> 
         <li class="dropdown"><a href="#" class="dropdown-toggle" 
          data-toggle="dropdown">Research <span 
           class="fa fa-angle-down"></span></a> 
          <ul class="dropdown-menu" role="menu"> 
           <li><a href="404.php">D3</a></li> 
          </ul></li> 
         <li><a href="team.php">Team</a></li> 
         <li class="active"><a href="contact.php">Contact</a></li> 
        </ul> 
       </div> 
       <!--/.nav-collapse --> 
       <a href="#" id="search-icon"> <i class="fa fa-search"> </i> 
       </a> 
      </div> 
     </nav> 
    </section> 
    <!-- END MENU --> 

В этом случае вкладка Выделив контакт:

<li class="active"><a href="contact.php">Contact</a></li> 

Если дело в том, что домашняя страница активна, то я должен был бы сделать это:

<li class="active"><a href="index.php">Home</a></li> 

I надеюсь, что я ясно дал понять, мой английский ужасен. Я ценю любую идею, я действительно новичок в веб-разработке.

Answer 1

Использование D3

<script> 
var pgUrl = window.location.href.substr(window.location.href.lastIndexOf('/') + 1); 
d3.select("#navbar").selectAll("a").each(function(d){ 
if(d.tecode here == pgUrl) 
d.attr("class","active"); 
}); 
</script> 

Answer 2

Одна вещь, которую вы можете сделать, это прочитать URL-адрес и на основании этого добавить active class к этой ссылке в вашем меню.

$(function() { 
    var pgurl = window.location.href.substr(window.location.href 
.lastIndexOf("/")+1); 
    $("#nav ul li a").each(function(){ 
      if($(this).attr("href") == pgurl || $(this).attr("href") == '') 
      $(this).addClass("active"); 
    }) 
}); 

Answer 3

Я думаю, что этот путь более полезным:

$(function(){ 
    var pgUrl = window.location.href.substr(window.location.href.lastIndexOf('/') + 1); 
    $("#nav ul li a[href='"+ pgUrl +"']").addClass('active'); 
});