1

I have made a navigational bar in Bootstrap.

It is in a file called header.html. 

<div class="collapse navbar-collapse" id="myNavbar">
   <ul class="nav navbar-nav pull-right">
       <li class="item active"><a href="./index.shtml">Home</a></li>
       <li><a href="./courses.shtml">Courses</a></li>
       <li><a href="./projects.shtml">Projects</a></li>
       <li><a href="./publications.shtml">Publications</a></li>
       <li><a href="./patents.shtml">Patents</a></li>
   </ul>

I use an include virtual on all 5 pages on the navbar to display my menu bar.

<!--#include virtual="/templates/header.html" -->

I am trying to figure out a way to apply the "item active" class to the page that the browser is viewing, all while using an included header file.

The only solution I thought of would be creating a CSS sheet per page, and only loading that specific CSS sheet depending on the page loaded.

That specific CSS sheet would style that specific li item.

I am open to using JavaScript if needed.

jwpfox
  • 5,124
  • 11
  • 45
  • 42
user7828137
  • 11
  • 1
  • I am not totally clear on what you are trying to do but if I have it right then JS (or more likely jQuery) to modify the DOM based on the loaded page seems to be the direction you might want to head in, maybe. – jwpfox Nov 20 '17 at 20:38
  • You can set the active class by PHP or JS by looking at the URL – Vince Verhoeven Nov 20 '17 at 20:41
  • @jwpfox If I know that the url ends "courses" and "projects" like in my example, how could I go about doing this? – user7828137 Nov 20 '17 at 21:21
  • Have a look at https://stackoverflow.com/questions/3452778/jquery-change-class-name for one piece of the puzzle – jwpfox Nov 21 '17 at 00:21
  • @jwpfox Solved. Thanks a lot! I used this from the link you sent: $("#td_id").addClass('newClass'); I just change the ID to the ID of the navbar menu block that I want selected, and change the newClass to "item active". – user7828137 Nov 21 '17 at 16:00

0 Answers0