How to change active class while click to another link in bootstrap use jquery?

Question

I have a html as sidebar, and use Bootstrap.

<ul class="nav nav-list">
    <li class="active"><a href="/">Link 1</a></li>
    <li><a href="/link2">Link 2</a></li>
    <li><a href="/link3">Link 3</a></li>
</ul>

I want to do some thing:

When I click a link such as Link 3, the page content will change to Link 3's content, and the Link 3 will have class active, and remove the active clss in Link 1.

I think this can be implemented in jQuery, and I have searched many question in SO, such as:

I use this script:

$(document).ready(function () {
    $('.nav li').click(function(e) {

        $('.nav li').removeClass('active');

        var $this = $(this);
        if (!$this.hasClass('active')) {
            $this.addClass('active');
        }
        //e.preventDefault();
    });
});

But most of them use preventDefault, this will prevent the continued action. So it can't change to Link 3's page content.

If I remove the preventDefault statement, when the page load Link 3's content, the active class will back to Link 1.

So Is there any way to solve this problem?

Why you want to remove preventDefault()? it will execute the code written after preventDefault() Don't worry about that. — Dhaval Marthak
– Dhaval Marthak, Commented Jul 31, 2013 at 16:36
@DKM , Yes, I have remove preventDefault(), but this will load the Link 3, and the active will back to Link 1. — Tanky Woo
– Tanky Woo, Commented Jul 31, 2013 at 16:40
After every link add a hash (/#link1) and read it through javascript and then set the condition in your code. it will solve your problem. — S. Rasel
– S. Rasel, Commented Jul 31, 2013 at 16:50

Karl-André Gagnon · Accepted Answer · 2017-07-04 13:07:32Z

32

You are binding you click on the wrong element, you should bind it to the a.

You are prevent default event to occur on the li, but li have no default behavior, a does.

Try this:

$(document).ready(function () {
    $('.nav li a').click(function(e) {

        $('.nav li.active').removeClass('active');

        var $parent = $(this).parent();
        $parent.addClass('active');
        e.preventDefault();
    });
});

edited Jul 4, 2017 at 13:07

answered Jul 31, 2013 at 16:39

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tanky Woo Over a year ago

But when I click the link, the page doesn't load by preventDefault.

Karl-André Gagnon Over a year ago

It's a little bit unclear what you are asking.Dont you load the page with javascript after the click? If no, you should use javascript to do what you are asking, but your server side language.

user2824371 Over a year ago

@TankyWoo Same thing here.

chetan Over a year ago

@Karl-AndréGagnon..what he is trying to say is that the class is showing active but the content is not displaying...say,Link 2 is showing active but the contents of the link2 is not displaying...

Fazil Khan · Accepted Answer · 2016-06-12 18:40:30Z

10

I am using bootstrap navigation

This did the job for me including active main dropdown's and the active children

$(document).ready(function () {
        var url = window.location;
    // Will only work if string in href matches with location
        $('ul.nav a[href="' + url + '"]').parent().addClass('active');

    // Will also work for relative and absolute hrefs
        $('ul.nav a').filter(function () {
            return this.href == url;
        }).parent().addClass('active').parent().parent().addClass('active');
    });

answered Jun 12, 2016 at 18:40

Fazil Khan

1011 silver badge2 bronze badges

Comments

aryaman basant · Accepted Answer · 2020-08-18 13:05:35Z

6

guys try this is a perfect answer for this question:

<script>
    $(function(){
        $('.nav li a').filter(function(){return this.href==location.href}).parent().addClass('active').siblings().removeClass('active')
        $('.nav li a').click(function(){
            $(this).parent().addClass('active').siblings().removeClass('active')    
        })
    })
    </script>

answered Aug 18, 2020 at 13:05

aryaman basant

711 silver badge3 bronze badges

1 Comment

Pritalgo Over a year ago

This works fine only when I click on the link. But when I go one page back, the active class stays with the previous link. How to avoid that?

Community · Accepted Answer · 2017-05-23 12:02:17Z

4

I had the same issue before. Try this answer here, it works on my site.

$(function(){
  var current_page_URL = location.href;
  $( "a" ).each(function() {
     if ($(this).attr("href") !== "#") {
       var target_URL = $(this).prop("href");
       if (target_URL == current_page_URL) {
          $('nav a').parents('li, ul').removeClass('active');
          $(this).parent('li').addClass('active');
          return false;
       }
     }
  });
});

Source: It was original posted here how to set active class to nav menu from twitter bootstrap

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Feb 3, 2016 at 9:56

hsusyh

613 bronze badges

Comments

Milan · Accepted Answer · 2016-10-07 13:10:10Z

3

<script type="text/javascript">
$(document).ready(function(){
    $('.nav li').click(function(){
        $(this).addClass('active');
        $(this).siblings().removeClass('active');

    });

});

answered Oct 7, 2016 at 13:10

Milan

311 bronze badge

Comments

Daniel Apt · Accepted Answer · 2013-07-31 16:43:08Z

2

If you change the classes and load the content within the same function you should be fine.

$(document).ready(function(){
    $('.nav li').click(function(event){
        //remove all pre-existing active classes
        $('.active').removeClass('active');

        //add the active class to the link we clicked
        $(this).addClass('active');

        //Load the content
        //e.g.
        //load the page that the link was pointing to
        //$('#content').load($(this).find(a).attr('href'));      

        event.preventDefault();
    });
});

answered Jul 31, 2013 at 16:43

Daniel Apt

2,7141 gold badge25 silver badges36 bronze badges

2 Comments

Tanky Woo Over a year ago

I have test it, but it will only change the active class to Link 3, but doesn't load the Link3 's content.

TheBetterJORT Over a year ago

This one worked in my case. Needed to remove event.preventDefault(); I'm using jquery + meteorJS.

BatBold · Accepted Answer · 2016-01-17 17:45:24Z

0

If you are using server side code like Java then you need to return active tab name and on return page have some function to disable( meaning remove active class) all tabs except the one you returned.

This would require you to add id or name to each tab. Little bit more work :)

answered Jan 17, 2016 at 17:45

BatBold

191 silver badge5 bronze badges

Comments

Didiencho · Accepted Answer · 2016-11-21 05:39:00Z

0

$(".nav li").click(function() {
    if ($(".nav li").removeClass("active")) {
        $(this).removeClass("active");
    }
    $(this).addClass("active");
});

This is what I came up with. It checks if the "li" element has the class of active, if it doesn't it skips the remove class part. I'm a bit late to the party, but hope this helps. :)

answered Nov 21, 2016 at 5:39

Didiencho

1

Comments

Rajput · Accepted Answer · 2016-11-21 20:56:00Z

You can use cookies for save postback data from one page to another page.After spending a lot time finally i was able to make this happen. I am suggesting my answer to you(this is fully working since I also needed this).

first give your li tag to valid id name like

<ul class="nav nav-list">
    <li id="tab1" class="active"><a href="/">Link 1</a></li>
    <li id="tab2"><a href="/link2">Link 2</a></li>
    <li id="tab3"><a href="/link3">Link 3</a></li>
</ul>

After that copy and paste this script. since I have written some javascript for reading, deleting and creating cookies.

 $('.nav li a').click(function (e) {
  
        var $parent = $(this).parent();
        document.cookie = eraseCookie("tab");
        document.cookie = createCookie("tab", $parent.attr('id'),0);
 });

    $().ready(function () {
        var $activeTab = readCookie("tab");
        if (!$activeTab =="") {
        $('#tab1').removeClass('ActiveTab');
          }
       // alert($activeTab.toString());
       
        $('#'+$activeTab).addClass('active');
    });

function createCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    }
    else var expires = "";

    document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}

Note: Make sure you have implmeted according to your requirement. I have written this script according to my implementation and its working fine for me.

Martin Mbae · Accepted Answer · 2019-06-18 16:05:46Z

0

This will do the trick

 $(document).ready(function () {
        var url = window.location;
        var element = $('ul.nav a').filter(function() {
            return this.href == url || url.href.indexOf(this.href) == 0;
        }).addClass('active').parent().parent().addClass('in').parent();
        if (element.is('li')) {
            element.addClass('active');
        }
    });

answered Jun 18, 2019 at 16:05

Martin Mbae

1,2961 gold badge20 silver badges33 bronze badges

Comments

amarjeet singh · Accepted Answer · 2019-10-12 14:42:03Z

html code in my case

<ul class="navs">
   <li  id="tab1"><a href="index-2.html">home</a></li>
   <li id="tab2"><a href="about.html">about</a></li>

   <li id="tab3"><a href="project-02.html">Products</a></li>

   <li id="tab4"><a href="contact.html">contact</a></li>
 </ul>

and js code is

  $('.navs li a').click(function (e) {
        var $parent = $(this).parent();
        document.cookie = eraseCookie("tab");
        document.cookie = createCookie("tab", $parent.attr('id'),0);
 });

    $().ready(function () {
        var $activeTab = readCookie("tab");
        if (!$activeTab =="") {
        $('#tab1').removeClass('ActiveTab');
          }
       // alert($activeTab.toString());

        $('#'+$activeTab).addClass('active');
    });

function createCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    }
    else var expires = "";

    document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}

Lok R BHATTA · Accepted Answer · 2019-11-15 22:30:42Z

0

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(document).ready(function () {
        var url = window.location;
        $('ul.nav a[href="' + url + '"]').parent().addClass('active');
        $('ul.nav a').filter(function () {
            return this.href == url;
        }).parent().addClass('active').parent().parent().addClass('active');
    });
    
    This works perfectly

answered Nov 15, 2019 at 22:30

Lok R BHATTA

12 bronze badges

Comments

Elite academy · Accepted Answer · 2020-03-13 06:46:34Z

0

<ul class="nav nav-list">
    <li id="tab1" class="active"><a href="/">Link 1</a></li>
    <li id="tab2"><a href="/link2">Link 2</a></li>
    <li id="tab3"><a href="/link3">Link 3</a></li>
</ul>

answered Mar 13, 2020 at 6:46

Elite academy

1

Collectives™ on Stack Overflow

How to change active class while click to another link in bootstrap use jquery?

13 Answers 13

4 Comments

Comments

1 Comment

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

4 Comments

Comments

1 Comment

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related