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

Question

I have a html as sidebar  and use Bootstrap    lt ul class  nav nav-list  gt       lt li class  active  gt  lt a href     gt Link 1 lt  a gt  lt  li gt       lt li gt  lt a href   link2  gt Link 2 lt  a gt  lt  li gt       lt li gt  lt a href   link3  gt Link 3 lt  a gt  lt  li gt   lt  ul gt    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    How to keep an active link in nav list  twitter bootstrap   Bootstrap CSS Active Navigation   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

User · Answer

lt script type  text javascript  gt    document  ready function            nav li   click function              this  addClass  active              this  siblings   removeClass  active

User · Answer

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

User · Answer

x000D   x000D   lt ul class  nav nav-list  gt  x000D       lt li id  tab1  class  active  gt  lt a href     gt Link 1 lt  a gt  lt  li gt  x000D       lt li id  tab2  gt  lt a href   link2  gt Link 2 lt  a gt  lt  li gt  x000D       lt li id  tab3  gt  lt a href   link3  gt Link 3 lt  a gt  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

x000D   x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D    document  ready function      x000D          var url   window location  x000D             ul nav a href      url         parent   addClass  active    x000D             ul nav a   filter function      x000D              return this href    url  x000D             parent   addClass  active   parent   parent   addClass  active    x000D          x000D       x000D      This works perfectly x000D   x000D   x000D

User · Answer

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

User · Answer

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   x000D   x000D   lt ul class  nav nav-list  gt  x000D       lt li id  tab1  class  active  gt  lt a href     gt Link 1 lt  a gt  lt  li gt  x000D       lt li id  tab2  gt  lt a href   link2  gt Link 2 lt  a gt  lt  li gt  x000D       lt li id  tab3  gt  lt a href   link3  gt Link 3 lt  a gt  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    After that copy and paste this script  since I have written some javascript for reading  deleting and creating cookies    x000D   x000D       nav li a   click function  e    x000D     x000D          var  parent     this  parent    x000D          document cookie   eraseCookie  tab    x000D          document cookie   createCookie  tab    parent attr  id   0   x000D       x000D   x000D          ready function      x000D          var  activeTab   readCookie  tab    x000D          if    activeTab         x000D              tab1   removeClass  ActiveTab    x000D              x000D            alert  activeTab toString     x000D          x000D                 activeTab  addClass  active    x000D          x000D   x000D  function createCookie name  value  days    x000D      if  days    x000D          var date   new Date    x000D          date setTime date getTime      days   24   60   60   1000    x000D          var expires      expires     date toGMTString    x000D        x000D      else var expires       x000D   x000D      document cookie   name         value   expires      path     x000D    x000D   x000D  function readCookie name    x000D      var nameEQ   name        x000D      var ca   document cookie split       x000D      for  var i   0  i  lt  ca length  i      x000D          var c   ca i   x000D          while  c charAt 0          c   c substring 1  c length   x000D          if  c indexOf nameEQ     0  return c substring nameEQ length  c length   x000D        x000D      return null  x000D    x000D   x000D  function eraseCookie name    x000D      createCookie name      -1   x000D    x000D   x000D   x000D    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

User · Answer

html code in my case   lt ul class  navs  gt      lt li  id  tab1  gt  lt a href  index-2 html  gt home lt  a gt  lt  li gt      lt li id  tab2  gt  lt a href  about html  gt about lt  a gt  lt  li gt       lt li id  tab3  gt  lt a href  project-02 html  gt Products lt  a gt  lt  li gt       lt li id  tab4  gt  lt a href  contact html  gt contact lt  a gt  lt  li gt    lt  ul gt    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  lt  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

User · Answer

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

User · Answer

guys try this is a perfect answer for this question   x000D   x000D   lt script gt        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                              lt  script gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

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

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to twitter-bootstrap