Adding Twitter's Bootstrap 2.x "active" Class to "li" element inside a div

2
votes

I'm using Bootstrap to create a nav menu. The nav is loaded into the asdf2.html page using jQuery load(). I am having difficulty adding the "active" class to the subLink when the user goes to asdf2.html.

How can I add the active class to the sublink when the user loads asdf2.html? I belive the div is causing issues but I'm not exactly sure why...

asdf2.html (loads the sub-nav.html page into the sub-nav div and adds the active class to links):

<div id="sub-nav"></div>

<script>
jQuery(function(){
    $('#sub-nav').load('sub-nav.html', function() {
         $('#sub-nav a:contains("Link")').parent().addClass('active'); //WORKS
         $('#sub-nav a:contains("subLink")').parent().addClass('active'); //DOESN'T WORK
    })
});
</script>

sub-nav.html (li in the div doesn't addClass):

<div class="well sidebar-nav span3" style="margin-left:0px;">
      <ul class="nav nav-list">
           <li><a href="asdf.html">Link</a></li>
           <div>
               <li><a href="asdf2.html">subLink</a></li>
           </div>
      </ul>
</div>
3
jquerytwitter-bootstrapaddclass
I just tried this with .html() instead of .load() and it seems to be working quite alright: jsfiddle.net/TF7GZ Do you have a live example of this to be not working? - mishik
.load works fine for me. It's adding cssAdd for subLink that doesnt work. When a user navigates to subLink, the jquery should add a class (that highlights the current page the user is on). It doesn't work because its in a Div. I'm trying to get addclass to work. - thedeepfield
So, as far as I understand, you have three pages: main one, asdf.html, asdf2.html. Plus, you also have a common sub-hav.html that is loaded into all of them. You want for "a[href=asdf.html]" to be active on asdf.html and "a[href=asdf2.html]" to be active on asdf2.html? - mishik
correct. when the user goes to asdf2.html, in the nav bar "sublink" should be highlighted (by adding the class "active"). It works for "link" but not for "sublink". I believe I have the incorrect syntax for $('#sub-nav a:contains("subLink")').parent().addClass('active'); - thedeepfield
The syntax seems correct. One more question: do asdf.html & asdf2.html have the same HTML & JavaScript code as in example? If not - could you please share it as well. - mishik

3 Answers

2
votes

Issue :

The css rules in bootstrap.css that style a tags inside nav lists have the following kind of selectors :

// Hover/focus
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
    ...
}

// Active nav items
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
    ...
}

See the code here.

Adding an extra div in your markup does indeed break the markup - the .active node is not a direct child of the .nav node anymore.

I haven't browsed the javscript code, but I would imagine the events are also bound using the same kind of selector.

Suggestion :

If you want to follow the bootstrap framework structure, remove the div node.

Or maybe add class="nav" to your div - be sure to thoroughly test the result though...

Question :

Why do you need this div in the first place ?

0
votes

1. use document ready to fire your jquery (jQuery(document).ready(function($) { // Code using $ as usual goes here. });) see also: http://api.jquery.com/ready/

2. you put the li tags of your subnav in a div instead of an ul tag

3. use a css selector to make your submenu active item visible:

.nav-list li.active li.active > a{
background-color: #0088CC;
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
 }

Working example code:

 <!DOCTYPE html>
 <html>
 <head>
 <title>Responsive nesting</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!-- Bootstrap -->
    <style type="text/css">
      body {
        padding-top: 40px;
        padding-bottom: 40px;
      }

    .nav-list li.active li.active > a{
    background-color: #0088CC;
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
     }


    </style>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">


<style type="text/css">
</style>
    </head>
    <body>
<div id="sub-nav"></div>



<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>    
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> 
<script>
jQuery(document).ready(function($) {
    $('#sub-nav').load('sub-nav.html', function() {
         $('#sub-nav a:contains("Link")').parent().addClass('active'); //WORKS
         $('#sub-nav a:contains("subLink")').parent().addClass('active'); //DOESN'T WORK
    })
});
</script>  
</body>
</html>

NOTE even when you put your li in a div it still works. Why should you? it breaks your html. (use .nav-list li.active > a in your css to make it visible)

See also: http://plnkr.co/9Xc2ThJ3ZEuJqlKLkj0r which shows the same result for the correct html and your li inside a div.

0
votes

There is a simple way to do this. You need to check the url that has been loaded and then add your class to the relevant li item. So,

<script>
  $(function(){
     var pageLink = document.URL;
     $("#yourNavDiv").children("li").each(function(){
         if($(this).children("a:first-child").attr("href") == pageLink){
             $(this).addClass("active");
         }
     });
  });
</script>