how to set active class to nav menu from twitter bootstrap

Question

I m new to the twitter bootstrap  Using there navigation menus   I m trying to set active class to selected menu   my menu is -    lt div class  nav-collapse  gt     lt ul class  nav  gt       lt li id  home  class  active  gt  lt a href    Home Index  gt Home lt  a gt  lt  li gt       lt li gt  lt a href     gt Project lt  a gt  lt  li gt       lt li gt  lt a href     gt Customer lt  a gt  lt  li gt       lt li gt  lt a href     gt Staff lt  a gt  lt  li gt       lt li  id  broker  gt  lt a href    Home Broker  gt Broker lt  a gt  lt  li gt       lt li gt  lt a href     gt Sale lt  a gt  lt  li gt     lt  ul gt   lt  div gt    I tried following thing after googling on this that i have to set active class on each page from menu like as--   lt script gt      document  ready function              home   addClass  active           lt  script gt    but problem for above is that i set home menu selected by default  Then it always get selected  Is there any other way to do this     or which i can generalize and keep my js in layout file itself    After executing application my menu looks -    after clicking on other menu item i get following result-   And i added following scripts on Index view and Broker view ---   lt script gt      document  ready function              home   addClass  active           lt  script gt    lt script gt      document  ready function              broker   addClass  active           lt  script gt    respectively

User · Answer

I just added a custom class to the ul section named target-active

<ul class="nav navbar-nav target-active">
    <li><a href="/">HOME</a></li>
    <li><a href="find-truck">FIND A TRUCK</a></li>
    <li><a href="our-service">OUR SERVICES</a></li>
    <li><a href="about-us">ABOUT US</a></li>
</ul>

If each li tags click get a new page from different place or same place, no need to add jquery removeClass function.

Add simple one line jquery code to each page to get your desired result

1st link page

$(function(){
    $(".target-active").find("[href='/']").parent().addClass("active");
});

2nd link page

$(function(){
    $(".target-active").find("[href=find-truck]").parent().addClass("active");
});

3rd link page

$(function(){
    $(".target-active").find("[href=our-service]").parent().addClass("active");
});

4th link page

$(function(){
    $(".target-active").find("[href=about-us]").parent().addClass("active");
});

User · Answer

For single page sites  the following is what I used  It not only sets the active element based on what s been clicked but it also checks for a hash value within the URL location on initial page load     document  ready function           var removeActive   function                 nav a    parents   li  ul    removeClass  active                     nav li    click function             removeActive              this  addClass   active                  removeActive            a href      location hash          parent   li    addClass   active

User · Answer

For single-page sites where the menu items simply jump down to other sections of the page  this simple solution works for me       nav li   on  click   function            nav li   removeClass  active          this  addClass  active

User · Answer

it is a workaround  try    lt div class  nav-collapse  gt     lt ul class  nav  gt       lt li id  home  class  active  gt  lt a href    Home Index  gt Home lt  a gt  lt  li gt       lt li gt  lt a href     gt Project lt  a gt  lt  li gt       lt li gt  lt a href     gt Customer lt  a gt  lt  li gt       lt li gt  lt a href     gt Staff lt  a gt  lt  li gt       lt li  id  demo  gt  lt a href    Home demo  gt Broker lt  a gt  lt  li gt       lt li id  sale  gt  lt a href     gt Sale lt  a gt  lt  li gt     lt  ul gt   lt  div gt    and on each page js add    document  ready function            nav li   removeClass  active     this will remove the active class from                                          previously active menu item        home   addClass  active        for demo         demo   addClass  active        for sale          sale   addClass  active

User · Answer

lt div class  nav-collapse  gt                   lt ul class  nav  gt                       lt li class  home  gt  lt a href    Home Index  gt Home lt  a gt  lt  li gt                       lt li class  Project  gt  lt a href     gt Project lt  a gt  lt  li gt                       lt li class  Customer  gt  lt a href     gt Customer lt  a gt  lt  li gt                       lt li class  Staff  gt  lt a href     gt Staff lt  a gt  lt  li gt                       lt li class  Broker  gt  lt a href    Home Broker  gt Broker lt  a gt  lt  li gt                       lt li class  Sale  gt  lt a href     gt Sale lt  a gt  lt  li gt                   lt  ul gt   lt  div gt      ul nav gt li home gt a   click        first  same to all the other options changing the li class name

User · Answer

You could add a diffrent class onto the BODY tag on each page e g  on the homepage you could have this    lt body class  nav-1-on  gt    Then this css    nav-1-on  nav-1 a   nav-2-on  nav-2 a   nav-3-on  nav-3 a   nav-4-on  nav-4 a           set your styles here     The NAV element    lt ul gt     lt li class  nav-1  gt  lt a href     gt Home lt  a gt  lt  li gt     lt li class  nav-2  gt  lt a href     gt Services lt  a gt  lt  li gt     lt li class  nav-3  gt  lt a href     gt About lt  a gt  lt  li gt     lt li class  nav-4  gt  lt a href     gt Contact lt  a gt  lt  li gt   lt  ul gt       Alternatively you could place a class on the BODY on each page and then grab that via jQuery and add the  active class to the correct nav item based on that tag

User · Answer

lt div class  nav-collapse  gt                   lt ul class  nav  gt                       lt li class  home  gt  lt a href    Home Index  gt Home lt  a gt  lt  li gt                       lt li class  Project  gt  lt a href     gt Project lt  a gt  lt  li gt                       lt li class  Customer  gt  lt a href     gt Customer lt  a gt  lt  li gt                       lt li class  Staff  gt  lt a href     gt Staff lt  a gt  lt  li gt                       lt li class  Broker  gt  lt a href    Home Broker  gt Broker lt  a gt  lt  li gt                       lt li class  Sale  gt  lt a href     gt Sale lt  a gt  lt  li gt                   lt  ul gt   lt  div gt    then for each page you add this     home     document  ready function                  home   addClass  active                Project page    document  ready function                      Project   addClass  active                    Customer page     document  ready function                          Customer   addClass  active                        staff  page      document  ready function                          Staff   addClass  active

User · Answer

For those using Codeigniter  add this below your sidebar menu    lt script gt        document  ready function                  nav li   removeClass  active            var currentUrl     lt  php  echo current url       gt               a href      currentUrl         parents  li ul   addClass  active             lt  script gt

User · Answer

You can use this JavaScript jQuery code      Sets active link in Bootstrap menu    Add this code in a central place used shared by all pages    like your  Layout cshtml in ASP NET MVC for example    a href      this location pathname         parents  li ul   addClass  active      It ll set the  lt a gt  s parent  lt li gt  and the  lt li gt  s parent  lt ul gt  as active   A simple solution that works     Original source   Bootstrap add active class to li

User · Answer

I am using Flask Bootstrap  My solution is a little bit simpler because my template already receives the option or choice as a parameter from Flask     x000D   x000D  var choice   document getElementById     item kind       x000D  choice className     active   x000D   x000D   x000D    First line  js code gets the element  So  you should identify each of the elements with a id  I ll show an example below   Second line  you add the class active   You can see html ids below     x000D   x000D   lt div class  navbar-collapse collapse  gt  x000D       lt ul class  nav navbar-nav  gt   x000D           lt li gt  x000D               lt a id  speed  href     url for  list gold per item  item kind  speed  level  2       gt  x000D                   lt h2 gt Speed lt  h2 gt  x000D               lt  a gt  x000D           lt  li gt  x000D           lt li gt  x000D               lt a id  life  href     url for  list gold per item  item kind  life  level  3       gt  x000D                   lt h2 gt Life lt  h2 gt  x000D               lt  a gt  x000D           lt  li gt  x000D       lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I had the same problem    solved it by adding the code shown below to the Into    document  ready  part of my  functions js  file which is included in every page footer  It s pretty simple  It gets the full current URL of the displayed page and compares it to the full anchor href URL  If they are the same  set anchor  li  parent as active  And do this only if anchor href value is not      then the bootstrap will solve it      document  ready function                     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

User · Answer

function  window    bs3Utils      bs3Utils nav         activeTab  function  tabId                 lt summary gt                     tab              lt  summary gt               lt param name  tabId  gt  lt  param gt              nav-tabs a href       tabId         tab  show            window bs3Utils   bs3Utils     window     example   var  actvieTab    type     0     portlet tab2 1     portlet tab2 2               bs3Utils nav activeTab  actvieTab                            lt ul class  nav nav-tabs  gt                           lt li class  active  gt                               lt a href   portlet tab2 1  data-toggle  tab  gt  -      lt  a gt                           lt  li gt                           lt li gt                               lt a href   portlet tab2 2  data-toggle  tab  gt  -      lt  a gt                           lt  li gt                        lt  ul gt

User · Answer

nav li    click function                 nav li   removeClass  active              this  addClass  active              check this out

[javascript] how to set active class to nav menu from twitter bootstrap

1st link page

2nd link page

3rd link page

4th link page

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to twitter-bootstrap

Examples related to menu