How to add class active on specific li on user click with jQuery

Question

I have a menu with certain items and I want when a user clicks on any li than only its class becomes an active class  I have a menu items like following    lt ul class  nav  gt       lt li class  dropdown active  gt           lt asp HyperLink ID  hlHome  runat  server  href  Default aspx  gt Home lt  asp HyperLink gt       lt  li gt       lt li class  dropdown  gt           lt asp HyperLink runat  Server  cssClass  dropdown-toggle  data-toggle  dropdown  data-hover  dropdown  data-delay  0  data-close-others  false  href     gt              Register              lt i class  icon-angle-down  gt  lt  i gt           lt  asp HyperLink gt           lt ul class  dropdown-menu  gt               lt li gt  lt asp HyperLink runat  server  ID  hlCreateAccount  href  register aspx  gt Create Account lt  asp HyperLink gt  lt  li gt               lt li gt  lt asp HyperLink runat  Server  href  forgot aspx  ID  hlForgot  gt Forgot Credentials   lt  asp HyperLink gt  lt  li gt               lt li gt  lt asp HyperLink runat  server  href  blocked aspx  ID  hlBlockedAccount  gt Blocked Account lt  asp HyperLink gt  lt  li gt               lt li gt  lt asp HyperLink ID  hlUnblockAccount  href  unblock aspx  runat  server  gt Unblock Account lt  asp HyperLink gt  lt  li gt           lt  ul gt       lt  li gt       lt li gt  lt asp HyperLink  ID  hlBug  runat  server  href  bug aspx  gt Report A Bug lt  asp HyperLink gt  lt  li gt       lt li gt  lt asp HyperLink ID  hlContact  runat  server  href  contact aspx  gt Contact Us lt  asp HyperLink gt  lt  li gt   lt  ul gt    And I have tried the following code with jQuery    lt script type  text javascript  gt      function pageLoad             var loc   window location href split               var page   loc loc length - 1              ul nav a   each function  i                var href     this  attr  href                if  href indexOf page      -1                       ul nav li active   removeClass  active                      this  parent   addClass  active                                     lt  script gt    Its not working with the drop down menus while working perfect with all other menus not having drop down items  How can I change the code that it works too with menu item having drop down list of items  I am also using update panel in my page

User · Answer

Write a javascript method to bind click event of each  li  item      function BindClickEvent             var selector     nav li         Removes click event of each li       selector   unbind  click          Add click event       selector   bind  click   function                   selector  removeClass  active              this  addClass  active                       first call this method when first time when page load         document   ready function              BindClickEvent                Call BindClickEvent method  from server side       protected void Page Load object sender  EventArgs e                ScriptManager RegisterStartupScript Page GetType    Guid NewGuid   ToString    BindClickEvent     true

User · Answer

Slightly off topic but having arrived here while developing an Angular2 app I would like to share that Angular2 automatically adds the class  router-link-active  to active router links such as this one    lt li gt  lt a  routerLink     Dashboard    gt Dashboard lt  a gt  lt  li gt    You can therefore easily style such links using CSS     router-link-active       color  red

User · Answer

Remove active for all items              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

You specified both jQuery and Javascript in the tags so here s both approaches   jQuery  var selector     nav li      selector  on  click   function          selector  removeClass  active          this  addClass  active          Fiddle  http   jsfiddle net bvf9u     Pure Javascript   var selector  elems  makeActive   selector     nav li    elems   document querySelectorAll selector    makeActive   function          for  var i   0  i  lt  elems length  i            elems i  classList remove  active         this classList add  active        for  var i   0  i  lt  elems length  i        elems i  addEventListener  mousedown   makeActive     Fiddle  http   jsfiddle net rn3nc 1    jQuery with event delegation   Please note that in approach 1  the handler is directly bound to that element  If you re expecting the DOM to update and new lis to be injected  it s better to use event delegation and delegate to the next element that will remain static  in this case the  nav       nav   on  click    li   function            nav li   removeClass  active          this  addClass  active          Fiddle  http   jsfiddle net bvf9u 1   The subtle difference is that the handler is bound to the  nav now  so when you click the li the event bubbles up the DOM to the  nav which invokes the handler if the element clicked matches your selector argument  This means new elements won t need a new handler bound to them  because it s already bound to an ancestor   It s really quite interesting  Read more about it here  http   api jquery com on

User · Answer

document  ready function              dates li a   click function  e                 dates li a   removeClass  active             var  parent     this           if    parent hasClass  active                   parent addClass  active                      e preventDefault

[javascript] How to add class active on specific li on user click with jQuery

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to asp.net

Examples related to css