title: Highlighting current page in the nav
body: <p>I need to highlight the current page in my left nav.</p>
  
  <p>The nav has to be loaded externally via an .shtml include:</p>
  
  <pre><code>&lt;!--#include file="leftnav-menu.inc"--&gt;
  </code></pre>
  
  <p>My urls take the form of:</p>
  
  <p>www.xxx.com/mission-critical.shtml</p>
  
  <p>but sometimes just:</p>
  
  <p>www.xxx.com/energy.shtml (eg one word no hyphen)</p>
  
  <p>My nav lists it as 'Mission critical'</p>
  
  <p>How can I highlight the ul li with "class=selected"? I've seen something like this:</p>
  
  <pre><code>$(function(){
     var path = location.pathname.substring(1);
     if ( path )
       $('.leftmenuNav ul li a[@href$="' + path + '"]').attr('class', 'selected');
   });    
  </code></pre>
  
  <p>Can't quite get my head around the string splitting etc...</p>
  
  <p>Sample nav bar:</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;&lt;a href="corporate-responsibility.shtml"&gt;Corporate responsibility&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="overview.shtml"&gt;Overview&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="governance.shtml"&gt;Governance&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="our-approach.shtml"&gt;Our approach&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>