Bootstrap twitter Active Navigation Bar - changing class names using JQuery

Question

Im using bootstrap twitter and I would like my different sites in the menu to show as active when clicked on. I've found the question Bootstrap Twitter CSS Active Navigation which deals with this issue.

My problem is that i cannot make the JQuery function in one of the answers to work. The modifications should be very straight forward to make it work in my case which in HTML is:

<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 problem? Thank you in advance.

Does your menu load different sections on one page or does it navigate to other pages e.g. index.html, about.html and so on? If it does go to other pages then the jQuery you've posted will never work for you as it's not storing the value anywhere as far as I can see. — Billy Moat, Mar 20 '13 at 15:26
I am using a Dynamic web template (.dwt file) where the navigation bar, and JQuery is a non-editable region. This template is used on both about.html and home.html. The menu navigates to about.html or home.html according to which is clicked on. — Emil Nielsen, Mar 20 '13 at 16:24

score 5 · Accepted Answer · answered Mar 20 '13 at 12:59

To answer your question in the comment to the first answer, .parents('li') would get any li parents found as you walk up the DOM from your current position. Adding the :first pseudo-selector ensures you get the first one found.

A better solution is to use .parent (singular.) Such as: $thisLi.parent('ul'). I don't belive that is your problem though...

Is it possible the browser is just loading a new page on you? I don't see you calling event.preventDefault(), in fact you don't capture the event in your code, you just respond to it...

Also, .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');
        }

    })

})

If the default navbar sets `Home` to `active`, how would you go about maintaining the new `li` as active when the link is clicked and the new page is being loaded,i.e without `preventDefault()`. — Wold, Mar 17 '14 at 01:16

score 1 · Answer 2 · answered Jul 27 '13 at 05:46

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

I also had this same issue, and ended up writing my own code.

Hopefully this works for everyone as did 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');
  }
});

Only difference from the standard Bootstrap menu bar was you have to add id="home" to the li for the home page, so on.

sasi · Answer 3 · 2013-03-20T10:52:39.713

0

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

edited Mar 20 '13 at 10:52

answered Mar 20 '13 at 10:46

sasi

4,192
4
28
47

For some reason I missed the $ when posting. – Emil Nielsen Mar 20 '13 at 10:49
Unfortunately it does not seem to work. Would you happen to know what li:first does in .parents('li:first')? I've seen li.first() used before - but not this way. – Emil Nielsen Mar 20 '13 at 11:04

score 0 · Answer 4 · answered Mar 20 '13 at 15:30

A very simple solution would be to manualy add a different class to the body of each of your pages which indicates which nav item should be active.

Then use jQuery to check what the class on the body is 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>

Bootstrap twitter Active Navigation Bar - changing class names using JQuery

4 Answers4