javascript - Set Active Menu Item with jQuery -

what trying do: regular menu has current active page in different style.

html (working properly)

<div>     <ul class="nav">             <li>             <a class="active" href="#">                 <span>one</span>             </a>         </li>          <li>             <a href="#">                 <span>two</span>             </a>         </li>          <li>             <a href="#">                 <span>three</span>             </a>        </li>     </ul>        </div> 

css (working properly)

.nav .active {     color: #fff;     background-color: #000; } 

js (not working)

 $('a').click(function(){     $(this).addclass('active')        .siblings()        .removeclass('active');  }); 

codepen taken sara soueidan's codepen.

sara soueidan's version cannot replicated in codepen (targetting both , li). version found using following js:

 $('.nav li').click(function() {         $('.nav li').removeclass('active');         $(this).addclass('active');  }); 

this version appears working, reasons don't understand need triple click menu button in order both use url , set active class.

can shed light banal matter?

problem: line $(this).addclass('active').siblings().removeclass('active');

actually there no siblings a within li

solution: need first remove active class a tags , add $(this)

$('a.active').removeclass('active'); $(this).addclass('active');