Menu
I've read other similar posts, but I can't make mine working. I want to make the clicked tab to be active
So here is how my bootstrap navbar looks like in html:
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/">
<img src="/static/images/logo.png" alt="Prime Solutions"/>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/"><strong>Acasa</strong></a></li>
<li><a href="/software"><strong>Software</strong></a></li>
<li><a href="/hardware"><strong>Hardware</strong></a></li>
<li><a href="/about"><strong>Despre Noi</strong></a></li>
<li><a href="/contact"><strong>Contact</strong></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><strong>Servicii</strong><b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/servicii/servicii">Servicii IT&C </a></li>
<li><a href="/servicii/consultanta">Consultanta IT&C </a></li>
<li class="divider"></li>
<li class="dropdown-header">Parteneri</li>
<li><a href="/parteneri">Partenerii nostri</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a class="btn btn-info" href="/noutati"><span id="news">Noutati</span></a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
However, it doesn't work. It only keeps my Acasa Tab to be active.
How should I write the script? thanks
This is how the bottom of my <body> looks like:
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/jquery-1.11.0.js"></script>
<script>
.......
</script>
This the the script I have tried:
<script>
$('.nav.navbar-nav > li').on('click', function() {
$(this).addClass('active');
$(this).siblings().removeClass('active');
});
</script>
EDIT:
Ok, so I figure it out what the problem was. The jQuery works, but when I click, for example, the Software tab, I get redirected to /software and thus, the Software tab doesn't turn on active because of the redirect. This navigation bar appears on each of my pages. So how can I fix this issue?
536
You can use:
$('.nav.navbar-nav > li').on('click', function(e) {
$('.nav.navbar-nav > li').removeClass('active');
$(this).addClass('active');
});
Bootply Demo
106
Use this code in each and every page.
$(function() {
var loc = window.location.href;
$(".navbar .navbar-nav > li").each(function() {
if (loc.match('/software')) { // software is the name of the page/slug
$(this).addClass("active");
}
});
});
Or else you can use 'if else if conditions, if you are having limited number of pages.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
