CODEWITHSUNDEEP
jquerytwitter-bootstrap
Deimantas Brandišauskas
Deimantas Brandišauskas

Reputation: 1772

Twitter Bootstrap Active Navigation Link

I'm trying to set my navigation link to active when I pressed it and stay active, and It works fine but when I apply this jQuery script I can't open any links to other .html pages. This is my markup:

        <ul class="nav">
          <li><a href="#">Home</a></li>
          <li><a href="#blog">Blog</a></li>
          <li><a href="about.html">About Me</a></li>
          <li><a href="#contact">Contact Me</a></li>
        </ul>

... and my jQuery:

    <script>
    $(document).ready(function () {
        $('ul.nav > li').click(function (e) {
            e.preventDefault();
            $('ul.nav > li').removeClass('active');
            $(this).addClass('active');                
        });            
    });
    </script>

Appreciate any help.

Upvotes: 0

Views: 1588

Answers (2)

Olrac
Olrac

Reputation: 1537

This is my code:

$(function () {

       $(document).on('click', '.ul.nav li', function () {
            var $this = $(this);

            $this.siblings('li').removeClass('active');
            $this.addClass('active');

            return false;
        });

}

Upvotes: 0

YD1m
YD1m

Reputation: 5895

In your code you prevent link default click behavior (open page).

Try that way:

$(document).ready(function () {
        $('ul.nav > li a').click(function (e) {
            $(this).closest('ul.nav').find('.active').removeClass('active');
            $(this).parent().addClass('active');                
        });            
    });

Upvotes: 4

Related Questions