Current Menu to Highlight
<p>I have this navigation bar and a local storage script which pages through a list by clicking next or previous. When you first enter the page, Overview is the first page to be shown and it is highlighted bydefault (class=first). </p>

<p>Till you are in the overview page and click Next Previous everything works but when you are in another navigation menu eg Qualifications and then click Next/Previous then the page redirects to the Overview page. It should remain in the Qualification page and the qualification menu should be highlighted. </p>

<p>An idea was suggested ? Clicking Next >> Find the xth element of the nav >> get the url, redirect to URL. Your help would be appreciated.(FYI-- Clicking next previous changes the Url) </p>

<p>Image attached to help you.</p>

<p><a href="http://oi48.tinypic.com/2lo6mhe.jpg" rel="nofollow">http://oi48.tinypic.com/2lo6mhe.jpg</a></p>

<pre><code>&lt;div id="nav"&gt;
    &lt;ul&gt;
        &lt;li class="first"&gt;&lt;a href="on-click-tab.html"&gt;OVERVIEW&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="on-click-tab1.html"&gt;PERSONAL DETAILS&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="on-click-tab2.html"&gt;QUALIFICATION&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="on-click-tab3.html"&gt;REFERENCES&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;

&lt;script&gt;
    // this will get the full URL at the address bar
    var url = window.location.href; 

    // passes on every "a" tag 
    $("#nav a").each(function() {
        // checks if its the same on the address bar
        if(url == (this.href)) {
            $('ul li.first').removeClass('first');
            $(this).closest("li").addClass("current");
        }
    });
&lt;/script&gt;

&lt;div class="next"&gt;
    &lt;input type="image" src="/images/button-right.gif" name="Next" id="Next" value="Next »" onclick="javascript:GetNext();"&gt;
&lt;/div&gt;
</code></pre>

<p>-</p>

<pre><code>function GetNext(){  
$("#no-more").html(" ");
var Pointer = localStorage.getItem('0');
Pointer++;
if (localStorage.getItem(Pointer) === null) {
    $("#no-more").html("There are no further applicants from your list").addClass('message-nm');
} else {
    var NextURL = localStorage.getItem(Pointer);
        localStorage.setItem('0', Pointer); 
    var totalItems = localStorage.length -1 ;
    var GoURL= NextURL.substring(NextURL.indexOf('~')+1);
    window.location.replace( GoURL ) ;
    $("#no-more").html('Working...').addClass('message-nm');
}
}

var totalItems = localStorage.length -1 ;
$("#progress").html(localStorage.getItem("0") + " of " + totalItems);
</code></pre>
