Как изменить код jquery, чтобы класс «active» задавался тегу, а не его родителю?

Question

[kapitk]

codepen https://codepen.io/codemode/pen/xVgdWp

<!-- Нужно поменять эту структуру -->
<ul id="top-menu">
  <li class="active">
    <a href="#">Top</a>
  </li>
  <li>
    <a href="#foo">Foo</a>
  </li>
  <li>
    <a href="#bar">Bar</a>
  </li>
  <li>
    <a href="#baz">Baz</a> 
  </li>
</ul>
<div id="top">Top</div>  
<div id="foo">Foo</div> 
<div id="bar">Bar</div>
<div id="baz">Baz</div>

<!-- На эту. Как изменить код jquery, чтобы класс "active" задавался тегу <a>, 
а не его родителю? Заранее спасибо -->

<nav id="top-menu">
    <a href="#" class="active">Top</a>
    <a href="#foo">Foo</a>
    <a href="#bar">Bar</a>
    <a href="#baz">Baz</a> 
</nav>
<div id="top">Top</div>  
<div id="foo">Foo</div> 
<div id="bar">Bar</div>
<div id="baz">Baz</div>

Answer 1

[Eugene Chefranov]

if (lastId !== id) {
       lastId = id;
       // Set/remove active class
       menuItems.removeClass("active")
         .end().filter("[href='#"+id+"']").addClass("active");
   }

Comments

[kapitk]

Нет, так не работает( В инспектере элементов не добавляется класс active для a
https://codepen.io/anon/pen/pXYLZG