jQuery add class active on menu

Question

I ve got a problem   I want to add the class  active  on item menu when the relative page is on   the menu is very simple    lt div class  menu  gt    lt ul gt   lt li gt  lt a href    link1   gt LINK 1 lt  a gt   lt li gt  lt a href    link2   gt LINK 2 lt  a gt   lt li gt  lt a href    link3   gt LINK 3 lt  a gt   lt  ul gt    lt  div gt    In jQuery I need to check if the url is www xyz com other link1   if it s this one I would like to add a class one the  a  element of link1   I m trying many solutions but nothing work

User · Answer

Wasim s answer a few posts up from here works as advertised   http   jsfiddle net Realto619 jKf3F 1

User · Answer

let path   window location href          nav li a   each function             if  this href     path                  this  addClass  activo             else                this  removeClass  activo

User · Answer

window location href will give you the current url  as shown in the browser address   After parsing it and retrieving the relevant part you would compare it with each link href and assign the active class to the corresponding link

User · Answer

This works for me  basically the navigation is same   lt div id  main-menu  gt     lt ul gt       lt li gt  lt a href   lt  php echo base url     gt shop  gt SHOP lt  a gt       lt li gt  lt a href   lt  php echo base url     gt events  gt EVENTS lt  a gt       lt li gt  lt a href   lt  php echo base url     gt services  gt SERVICES lt  a gt     lt  ul gt   lt  div gt    Let s say you re at the URL   http   localhost project name shop detail shop   And you want the  SHOP  li link to get class  active  so you can visually indicate it s the active navigation  even if you re at the sub page of  shop  at  detail shop     The javascript    var path   window location pathname  var str   path split       var url   document location protocol          document location hostname         str 1          str 2        main-menu a href      url         parent  li   addClass  active       str will get  project name shop detail shop document location protocol will get http  document location hostname will get localhost str 1  will get project name str 2  will get shop   Essentially that will match links in the nav who s href attribute begins with  shop   or whatever the secondary directory happens to be

User · Answer

lt script type  text javascript  gt      jQuery document  ready function          var url   window location pathname  urlRegExp   new RegExp url replace                            navbar li a   each function      alert  dsfgsdgfd        if urlRegExp test this href replace                    this  addClass  active               lt  script gt

User · Answer

An easier way for me was   var activeurl   window location     a href    activeurl       parent  li   addClass  active      because my links go to absolute url  but if your links are relative then you can use    window location   pathname

User · Answer

Check this out this WORKS  Html   lt div class  menu  gt        lt ul gt           lt li gt  lt a href    link1   gt LINK 1 lt  a gt           lt li gt  lt a href  www xyz com other link1  gt LINK 2 lt  a gt           lt li gt  lt a href    link3   gt LINK 3 lt  a gt       lt  ul gt    lt  div gt    Jquery    document  ready function            menu ul li a   each function            if   this  attr  href     www xyz com other link1                 this  addClass  active

User · Answer

Use window location pathname and compare it with your links  You can do something like this      a href        currentSiteVar         addClass  active      But first you have to prepare currentSiteVar to put it into selecor

User · Answer

Setting the active menu  they have the many ways to do that  Now  I share you a way to set active menu by CSS        lt a href  index php id home  gt Home lt  a gt       lt a href  index php id news  gt News lt  a gt       lt a href  index php id about  gt About lt  a gt    Now  you only set   request  id       home  th   echo  class  active     then we can do same with others    lt a href  index php id home   lt  php if   REQUEST  id     home   echo  class  active      gt  gt Home lt  a gt   lt a href  index php id news   lt  php if   REQUEST  id     news   echo  class  active      gt  gt News lt  a gt   lt a href  index php id about   lt  php if   REQUEST  id     about   echo  class  active      gt  gt About lt  a gt    I think it is useful with you

User · Answer

function          var pgurl   window location href substr window location href lastIndexOf      1            nav li   each function              if    a  this  attr  href      pgurl       a   this  attr  href                       this  addClass  active

User · Answer

Click here for a solution in jsFiddle  What you need is you need to get window location pathname as mentioned and then create regexp from it and test it against navigation hrefs     function         var url   window location pathname           urlRegExp   new RegExp url replace                      create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn t present there            now grab every link from the navigation             menu a   each function                   and test its normalized href against the url pathname regexp             if urlRegExp test this href replace                                this  addClass  active

User · Answer

I am guessing you are trying to mix Asp code and JS code and at some point it s breaking or not excusing the binding calls correctly   Perhaps you can try using a delegate instead  It will cut out the complexity of when to bind the click event   An example would be      body   delegate   menu li   click  function       var  li     this       var shouldAddClass    li find  a href   www xyz com link1     length    0      if shouldAddClass           li addClass  active               See if that helps  it uses the Attribute Starts With Selector from jQuery   Chi

User · Answer

this work for me  D      function setActive           aObj   document getElementById  menu   getElementsByTagName  a          for i 0 i lt aObj length i              if document location href indexOf aObj i  href  gt  0              var activeurl   window location               a href    activeurl       parent  li   addClass  active                                 window onload   setActive

User · Answer

No other  addClass  methods worked for me when adding a class to an  a  element on menu except this one     function              var url   window location pathname      urlRegExp   new RegExp url replace                                 a   each function                                  if  urlRegExp test this href replace                                  this  addClass  active                                        This took me four hours to find it

User · Answer

Get the LI elments  loop through  check the HREF       menu   find  a   each function         if   this  attr  href   indexOf  www xyz com other link1    gt 0                this  addClass  active

[jquery] jQuery add class .active on menu

Examples related to jquery

Examples related to menu