How to change active class by clicking on another link in bootstrap, use jquery?

Question

I have html as a 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 something:

When I click link, such as link 3, the page content will change to 3rd level content, and link 3 will have the class active and will remove the active clss in link 1.

I think this can be implemented in jQuery , and I was looking for a lot of questions in SO, for example:

• How to save the active link in the navigation list (twitter bootstrap)?
• Basic CSS Active Navigation Download

I am using 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 continuation of the action. Thus, he cannot go to the content of a page of the 3rd level.

If I remove the preventDefault statement when the page loads Link 3 content, the active class will return to link 1.

So, is there a way to solve this problem?

Answer 1

You are binding you to a click on the wrong element, you have to snap it to a .

You prevent the default event in li , but li have no default behavior, a does.

Try the following:

 $(document).ready(function () { $('.nav li a').click(function(e) { $('.nav li.active').removeClass('active'); var $parent = $(this).parent(); $parent.addClass('active'); e.preventDefault(); }); }); 

Answer 2

I am using boot navigation

This worked for me, including an active main dropdown and active kids.

 $(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'); }); 

Answer 3

If you change classes and load content into 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 //eg //load the page that the link was pointing to //$('#content').load($(this).find(a).attr('href')); event.preventDefault(); }); }); 

Answer 4

I had the same problem. 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: the original is posted here how to set the active class to the twitter bootstrap navigation menu

Answer 5

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

Answer 6

If you use server-side code, such as Java, you need to return the name of the active tab, and on the return page there is a function to disable (which means deleting the active class) all tabs except those that you returned.

This will require that you add an identifier or name to each tab. A bit more work :)

Answer 7

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

Here is what I came up with. It checks if the element "li" has an active class if it does not skip part of the remove class. I'm a little late to the party, but hope this helps. :)

Answer 8

You can use cookies to store postback data from one page to another. After a long time I was able to do this. I offer my answer to you (this works completely since I also needed it).

first give the li tag a valid identifier name, e.g.

 <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 wrote 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 program it according to your requirements. I wrote this script in accordance with my implementation and its work for me.

Answer 9

It will do its job

  $(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'); } }); 

Answer 10

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

  $('.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); }