Geek Answers Handbook

Bootstrap twitter Active Navigation Bar - change class names with jQuery

I am using twitter bootstrap and I would like my different sites in the menu to appear as active when clicked. I found a Bootstrap Twitter question CSS Active Navigation that addresses this issue.

My problem is that I cannot get the jQuery function in one of the answers to work. The changes should be very simple to make it work in my case, which is in HTML:

<script> $('body').on('.nav li a', 'click', function() { var $thisLi = $(this).parents('li:first'); var $ul = $thisLi.parents('ul:first'); if (!$thisLi.hasClass('active')) { $ul.find('li.active').removeClass('active'); $thisLi.addClass('active'); } }); </script> <ul class="nav nav-pills pull-left"> <li class="active"> <a href="home.html">Home</a> </li> <li> <a href="about.html">About</a> </li> </ul>

Any clues as to what might be the issue? Thank you in advance.

+4
source share
4 answers

To answer your question in the comment on the first answer, .parents ('li') will get all the parents you found when you approach the DOM from your current position. Addendum: the first pseudo selector ensures that you get the first one found.

The best solution is to use .parent (singular). For example: $thisLi.parent('ul') . I do not believe that this is your problem, though ...

Is it possible that the browser just loads a new page? I don’t see you calling event.preventDefault() , because you are not writing the event to your code, you are simply responding to it ...

In addition, .on is the preferred way to bind to events now:

 $(function(){ $('.nav li a').on('click', function(e){ e.preventDefault(); // prevent link click if necessary? var $thisLi = $(this).parent('li'); var $ul = $thisLi.parent('ul'); if (!$thisLi.hasClass('active')) { $ul.find('li.active').removeClass('active'); $thisLi.addClass('active'); } }) })
+5
source

I know this is a little late, but better late than never.

I also had the same problem and I wrote my own code.

Hope this works for everyone, like me.

JQuery

  $(document).ready(function () { var page = document.location.href; // Set BaseURL var baseURL = 'http://www.site.com/'; // Get current URL and replace baseURL var href = window.location.href.replace(baseURL, ''); // Remove trailing slash href = href.substr(-1) == '/' ? href.substr(0, href.length - 1) : href; // Get last part of current URL var page = href.substr(href.lastIndexOf('/') + 1); if(page == ''){ $('#home').addClass('active'); }else{ $('#home').removeClass('active'); } if(page == 'about'){ $('#about').addClass('active'); }else{ $('#about').removeClass('active'); } if(page == 'terms'){ $('#terms').addClass('active'); }else{ $('#terms').removeClass('active'); } if(page == 'contact'){ $('#contact').addClass('active'); }else{ $('#contact').removeClass('active'); } });

The only difference from the standard Bootstrap menu bar is that you need to add id = "home" in li for the home page and so on.

+1
source 
 if (!$thisLi.hasClass('active')) { $ul.find('li').removeClass('active'); $thisLi.addClass('active'); }
0
source

A very simple solution would be to manually add another class to the body of each of your pages that indicates which navigation item should be active.

Then use jQuery to check what the class is in the body and set the active NAV LI class accordingly.

 <body class="nav-1-active"> <ul> <li class="nav1"><a href="#">Home</a></li> <li class="nav2"><a href="#">About Us</a></li> <li class="nav3"><a href="#">Our Services</a></li> </ul>
0
source

More articles:


All Articles