Twitter Bootstrap add active class to li

Question

Using twitter bootstrap  and I need to initiate active class to the li portion of the main nav  Automagically  We use php not ruby   Sample nav     lt ul class  nav  gt       lt li gt  lt a href     gt Home lt  a gt  lt  li gt       lt li gt  lt a href   forums  gt Forums lt  a gt  lt  li gt       lt li gt  lt a href   blog  gt Blog lt  a gt  lt  li gt       lt li gt  lt a href   faqs php  gt FAQ s lt  a gt  lt  li gt       lt li gt  lt a href   item php  gt Item lt  a gt  lt  li gt       lt li gt  lt a href   create php  gt Create lt  a gt  lt  li gt   lt  ul gt    Bootstrap code is as follows    lt li class  active  gt  lt a href     gt Home lt  a gt  lt  li gt    So just need to figure out how to append the class active to the current page  Have looked thru nearly every answer on Stack  with no real joy   I had played with this     menu handler     function        var url   window location pathname        var activePage   url substring url lastIndexOf      1           nav li a   each function              var currentPage   this href substring this href lastIndexOf      1            if  activePage    currentPage                  this  parent   addClass  active                             But no joy

User · Answer

For Bootstrap 3   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      Update  For Bootstrap 4   var url   window location     Will only work if string in href matches with location    ul navbar-nav a href     url        parent   addClass  active        Will also work for relative and absolute hrefs    ul navbar-nav a   filter function         return this href    url     parent   addClass  active

User · Answer

To activate the menus and submenus  even with params in the URL  use the code bellow      Highlight the active menu   document  ready function          var action   window location pathname split      1           If there s no action  highlight the first menu item     if  action                     ul nav li first   addClass  active          else              Highlight current menu            ul nav a href       action         parent   addClass  active                Highlight parent menu item            ul nav a href       action         parents  li   addClass  active                This accepts URLs like       posts    posts 1    posts 1 edit

User · Answer

This works fine for me  It marks both simple nav elements and dropdown nav elements as active     document  ready function         var url   window location         ul nav a href      this location pathname         parent   addClass  active           ul nav a   filter function           return this href    url        parent   parent   parent   addClass  active          Passing this location pathname to     ul nav a href            marks also simple nav elements  Passing url did nt work for me

User · Answer

You don t really need any JavaScript with Bootstrap     lt ul class  nav  gt        lt li gt  lt a data-target     data-toggle  pill  href   accounts  gt Accounts lt  a gt  lt  li gt        lt li gt  lt a data-target     data-toggle  pill  href   users  gt Users lt  a gt  lt  li gt    lt  ul gt    To do more tasks after the menu item is selected you need JS as explained by other posts here   Hope this helps

User · Answer

There is a hitch with the accepted answer in some rare cases for bootstrap 4  In order to use the solution for relative paths like    lt ul class  navbar-nav nav-t  gt      lt li class  nav-item  gt  lt a href  index php  class  nav-link  gt Home lt  a gt  lt  li gt      lt li class  nav-item  gt  lt a href  about php  class  nav-link  gt About lt  a gt  lt  li gt      lt li class  nav-item  gt  lt a href  blog php  class  nav-link  gt Blog lt  a gt  lt  li gt      lt li class  nav-item  gt  lt a href  info php  class  nav-link  gt Info lt  a gt  lt  li gt   lt  ul gt    Then you will find out that the code for    if  activePage    currentPage            this  parent   addClass  active              active page returns the whole url and current location returns the current href DOM Element value which is filename php  To solve this just tweak the code a little by adding a method to correct this         other js jquery code var activeMenuItemChanges function          function stripTrailingSlash str            if str substr -1                     return str substr 0  str length -1                     return str               for cases where we do not use full url but relative file names in the href of ul gt li gt a tags      function getRelativeFileName str           let page str substr str lastIndexOf      1           if page length  gt  0               return page                    return  index   index php              let url window location pathname       let activeLocation stripTrailingSlash url        let activeFileName getRelativeFileName activeLocation            nav-item a   each function             let currentLocation stripTrailingSlash   this  attr  href             if activeFileName  currentLocation                 this  parent   addClass  active                        activeMenuItemChanges           other js jquery code

User · Answer

None of these worked for me  My Bootstrap setup navigates to separate pages  so I can t do it on a click action  but the active class is removed on the navigation to a new page   and my urls don t match exactly  So here s what I did  based on my exception-based situation  Hope it helps others     Adding the active class to Twitter bootstrap navs  with a few alternate approaches    document  ready function       var rawhref   window location href    raw current url    var newpage     window location href match                 1   substring 1      take only the last part of the url  and chop off the first char  substring   since the contains method below is case-sensitive  Don t need to do this if they match exactly    if  newpage     someNonMatchingURL        deal with an exception literally     newpage    matchingNavbarText          if  rawhref indexOf  somePartofURL      -1      look for a consistent part of the path in the raw url to deal with variable urls  etc      newpage    moreMatchingNavbarText              nav li a contains      newpage         parent   addClass  active      add the active class  Note that the contains method requires the goofy quote syntax to insert a variable

User · Answer

I had the same problem  and this is what I added in my app launch script  and it worked smoothly  Here is the javascript    document  ready function       var navs      nav  gt  ul nav          Add class  active to current link   navs find  a   each function         var cUrl   String window location  split      0       if  cUrl substr cUrl length - 1                   cUrl   cUrl slice 0 -1              if      this   0  href   cUrl            this  addClass  active             this  parents  ul   add this  each function              this  parent   addClass  open                                And the corresponding HTML is shown below  I m using CoreUI  a phenomenal open source admin template and has support for many front end frameworks like Angular  plain bootstrap  Angular 4 etc    lt div class  sidebar  gt   lt nav class  sidebar-nav open   gt       lt ul class  nav  id  navTab  role  tablist  gt           lt li class  nav-item  gt               lt a class  nav-link     href   summary  gt  lt i class  icon-speedometer  gt  lt  i gt  Dashboard  lt  a gt           lt  li gt           lt li class  nav-item  gt               lt a class  nav-link     href   balanceSheet  gt  lt i class  icon-chart  gt  lt  i gt  Balance Sheet  lt  a gt           lt  li gt           lt li class  divider  gt  lt  li gt           lt li class  nav-title border-bottom  gt               lt p class  h5 mb-0  gt                   lt i class  icon-graph  gt  lt  i gt  Assets              lt  p gt           lt  li gt        lt  ul gt     lt  nav gt   lt  div gt

User · Answer

If you are using an MVC framework with routes and actions     document  ready function             a href      this location pathname         parent   addClass  active          As illustrated in this answer by Christian Landgren  https   stackoverflow com a 13375529 101662

User · Answer

function        Highlight the active nav link  var url   window location pathname  var filename   url substr url lastIndexOf        1       navbar a href       filename         parent   addClass  active           For more details Click Here

User · Answer

This did the job for me including active main dropdowns and the active childrens  thanks to 422      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

The solution is simple and there is no need for server side or ajax  you only need jQuery and Bootstrap  On every page add an id to the body tag  Use that id to find a tag that contains the page name  value of a tag     Example   page1 html   lt body id  page1  gt       lt ul class  nav navbar-nav  gt           lt li gt  lt a href  page1 html  gt Page1 lt  a gt  lt  li gt           lt li gt  lt a href  page2 html  gt Page2 lt  a gt  lt  li gt       lt  ul gt       lt script src  script js  gt  lt  script gt   lt  body gt    page2 html   lt body id  page2  gt       lt ul class  nav navbar-nav  gt           lt li gt  lt a href  page1 html  gt Page1 lt  a gt  lt  li gt           lt li gt  lt a href  page2 html  gt Page2 lt  a gt  lt  li gt       lt  ul gt       lt script src  script js  gt  lt  script gt   lt  body gt    script js   lt script gt        function                  page1 a contains  Page1     parent   addClass  active                page2 a contains  Page2     parent   addClass  active              lt  script gt    Big thanks to Ben  YouTube

User · Answer

Just in case you are using Boostrap in Angulajs  this is a simple directive that works for me  because data-toggle cited by Kam is not included in Angular-ui   Hope can help   app directive  myDataToggle   function        function link scope  element  attrs            var e   angular element element           e on  click   function                e parent   parent   children   removeClass  active                e parent   addClass  active                         return           restrict   A           link  link                 lt ul class  nav nav-sidebar  gt       lt li gt  lt a href    page1  my-data-toggle gt Page1 lt  a gt  lt  li gt       lt li gt  lt a href    page2  my-data-toggle gt Page2 lt  a gt  lt  li gt       lt li gt  lt a href    page3  my-data-toggle gt Page3 lt  a gt  lt  li gt   lt  ul gt

User · Answer

Try this       Remove active for all items      page-sidebar-menu li   removeClass  active        highlight submenu item    li a href      this location pathname         parent   addClass  active        Highlight parent menu item     ul a href      this location pathname         parents  li   addClass  active

User · Answer

if you put    data-toggle  pill    in the  tag it should work automatically   http   twitter github com bootstrap javascript html tabs  read under Markup

User · Answer

Here is complete Twitter bootstrap example and applied active class based on query string   Few steps to follow to achieve correct solution   1  Include latest jquery js and bootstrap js javascript file   2  Include latest bootstrap css file  3  Include querystring-0 9 0 js for getting query string variable value in js   4  HTML    lt div class  navbar  gt     lt div class  navbar-inner  gt       lt div class  container  gt         lt ul class  nav  gt           lt li class  active  gt             lt a href    page 0  gt              Home            lt  a gt           lt  li gt           lt li gt             lt a href    page 1  gt              Forums            lt  a gt           lt  li gt           lt li gt             lt a href    page 2  gt              Blog            lt  a gt           lt  li gt           lt li gt             lt a href    page 3  gt              FAQ s            lt  a gt           lt  li gt           lt li gt             lt a href    page 4  gt              Item            lt  a gt           lt  li gt           lt li gt             lt a href    page 5  gt              Create            lt  a gt           lt  li gt         lt  ul gt       lt  div gt     lt  div gt   lt  div gt    JQuery in Script Tag     function             nav li   click function                 nav li   removeClass  active            setTimeout function                 var page     QueryString  page                    nav li eq     page        addClass  active               300                  I have done complete bin  so please click here http   codebins com bin 4ldqpaf

User · Answer

We managed to fix in the end     menu handler     function      function stripTrailingSlash str        if str substr -1                  return str substr 0  str length - 1             return str         var url   window location pathname      var activePage   stripTrailingSlash url          nav li a   each function          var currentPage   stripTrailingSlash   this  attr  href          if  activePage    currentPage            this  parent   addClass  active

[jquery] Twitter Bootstrap add active class to li

Update

Examples related to jquery

Examples related to menu

Examples related to twitter-bootstrap