Auto-Selecting Navigation on a one page site
<p>I'm working on a one page website and I want my menu items to highlight when the user either scrolls or clicks from one menu item to the other. </p>

<p>The way I'm currently trying is: </p>

<pre><code>   &lt;nav&gt;
    &lt;div class="menu"&gt;
        &lt;ul&gt;
           &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#what"&gt;What I Do&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#work"&gt;Work&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
   &lt;/nav&gt;
</code></pre>

<p>I'm trying this jQuery but it doesn't seem to activate the <code>.selected</code> in the css? </p>

<pre><code> $(function(){
       var path = location.pathname.substring(1);
       if ( path )
             $('nav a[href$="' + path + '"]').attr('class', 'selected');
  });
</code></pre>

<p>css </p>

<pre><code>.selected {
   color: #f9b950;
   font-weight: bold;
}
</code></pre>

<p>Thanks</p>
