Glen Glen - 28 days ago 6
Javascript Question

active navbar in bootstrap stay active on click of page title

I am using bootstrap nav bar and wondering why i cant get the menu page selected to stay 'high lighted ='lit' when the href title is clicked. My first problem was that 'home' was always 'lit'.the script below fixes that. I have 2 empty titles at moment and when they are clicked they stay 'lit' (they are dead pages with no href yet) . I ve tried over 10 js scripts and the best i can find is one below which allows the titles to be 'lit' on hover but they don't stay 'lit' on click. Except the 2 empty titles as mentioned above.

is it a CDN issue or is it abvious from my code?

$(document).ready(function() {
$('li.active').removeClass('active');
$('a[href="' + location.pathname + '"]').closest('li').addClass('active');
});
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="home.php">Listalot</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="home.php">Home <span class="sr-only">(current)</span></a></li>
<li ><a href="table1.php">My Sellers</a></li>
<li><a href="applicant_card.php">New Customer</a></li>





<ul class="nav navbar-nav ">

<li class="dropdown">
<a href="" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">My Figures <span class="caret"></span></a>
<ul class="dropdown-menu">

<li><a href="figures2017.php">2017</a></li>
<li><a href="figures2016.php">2016</a></li>
<li><a href="figures2015.php">2015</a></li>
<li><a href="figures2014.php">2014</a></li>
<li><a href="figures2013.php">2013</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Compare Years</a></li>
</ul>
</li>
</ul>


<li><a href="#">Mortgages</a></li>
<li><a href="#">News Page</a></li>


<!-- <form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>

</form> -->
<ul class="nav navbar-nav navbar-right">



<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
<!-- /.navbar-collapse -->
<!-- /.container-fluid -->
<li><a href="index.php">Log In</a></li>


<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>

</form>

</div>
</div>
</nav>

<div><br></div>
<br><br>

Answer Source

You should check the window.location property and if it fits the link required set the active class.

Your code should do the trick always if the location.pathname value is the same value as the href property in the a element.

$(document).ready(function() {
  $('li.active').removeClass('active');
  $('a[href$="' + location.pathname.match(/[^\\/]+$/)[0] + '"]').closest('li').addClass('active'); 
});

Maybe checking only for the end of the pathname (table1.php,applicant_card.php) will work. The href attribute value ends with the last part of the location.pathname after the last /slash (from this answer https://stackoverflow.com/a/19292598/4635829 by SmokeyPHP).