add remove active class for ul list with jquery

Question

I m trying to remove and set an active class for a list item every time it s clicked  It s currently removing the selected active class but isn t setting it   Any idea what I m missing   HTML   lt ul class  nav nav-list  gt     lt li class  nav-header  gt Test lt  li gt     lt li class  active  gt  lt a href  page1 php  gt Page 1 lt  a gt  lt  li gt     lt li gt  lt a href  page2 php  gt Page 2 lt  a gt  lt  li gt     lt li gt  lt a href  page3 php  gt Page 3 lt  li gt   lt  ul gt    jquery        nav-list   click function            console log  Clicked            nav-list li active   removeClass  active          this  addClass  active

User · Answer

x000D   x000D    document  ready function    x000D          cliked   click function     x000D              cliked   removeClass  liactive    x000D            this  addClass  liactive    x000D          x000D      x000D   liactive   x000D      background  orange  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt ul x000D    className  sidebar-nav position-fixed   x000D    style  height 450px overflow scroll  x000D   gt  x000D       lt li gt  x000D           lt a className  cliked liactive  href     gt  x000D              check Kyc Status x000D           lt  a gt  x000D       lt  li gt  x000D       lt li gt  x000D           lt a className  cliked  href     gt  x000D              My Investments x000D           lt  a gt  x000D       lt  li gt  x000D       lt li gt  x000D           lt a className  cliked  href     gt  x000D              My SIP x000D           lt  a gt  x000D       lt  li gt  x000D       lt li gt  x000D           lt a className  cliked  href     gt  x000D              My Tax Savers Fund x000D           lt  a gt  x000D       lt  li gt  x000D       lt li gt  x000D           lt a className  cliked  href     gt  x000D              Transaction History x000D           lt  a gt  x000D       lt  li gt  x000D       lt li gt  x000D           lt a className  cliked  href     gt  x000D              Invest Now x000D           lt  a gt  x000D       lt  li gt  x000D       lt li gt  x000D           lt a className  cliked  href     gt  x000D              My Profile x000D           lt  a gt  x000D       lt  li gt  x000D       lt li gt  x000D           lt a className  cliked  href     gt  x000D              FAQ s x000D           lt  a gt  x000D       lt  li gt  x000D       lt li gt  x000D           lt a className  cliked  href     gt  x000D              Suggestion Portfolio x000D           lt  a gt  x000D       lt  li gt  x000D       lt li gt  x000D           lt a className  cliked  href     gt  x000D              Bluk Lumpsum   Bulk SIP x000D           lt  a gt  x000D       lt  li gt  x000D   lt  ul gt   x000D   x000D   x000D

User · Answer

this will point to the  lt ul gt  selected by  nav-list  You can use delegation instead       nav-list   on  click    li   function             nav-list li active   removeClass  active          this  addClass  active

User · Answer

Try this        nav-list li   click function              nav-list li active   removeClass  active          this  addClass  active          In your context   this  will points to the UL element not the Li  Hence you are not getting the expected results

User · Answer

you can use siblings and removeClass method      nav-link li   click function           this  addClass  active   siblings   removeClass  active

User · Answer

I used this       nav-list li active   removeClass  active      this  parent   addClass  active        Since the active class is in the  lt li gt  element and what is clicked is the  lt a gt  element  the first line removes  active from all  lt li gt  and the second one  again    this  represents  lt a gt  which is the clicked element  adds  active to the direct parent  which is  lt li gt

[javascript] add/remove active class for ul list with jquery?

Examples related to javascript

Examples related to jquery

Examples related to html