Highlight Current Page after Page Loads

问题

Help needed...I have this navigation bar

    <div id="nav">
<ul>
    <li id="overview" class="first"><a href="start?nhsyshhdyye%sdfsd">OVERVIEW</a></li>
    <li id="details" class=”current”><a href="start?ertrer%sdsde%srerte "> DETAILS</a></li>
    <li id="questions" ><a href="start?opuuwe%sjiwue ">QUESTIONS</a></li>
    <li id="review" ><a href="start?sdfw%wrfwlwer ">REVIEWS</a></li>
</ul>
</div>
<div><!---Details Page Start--->

<div><!---other content---></div>
<div> <input type="submit" name="answer-save" id=" answer-save" value="Save" class="save-btn" style="width:100px;">
 </div>
<div><!---other content---></div>
<div>
<input type="submit" name="answer-save1" id=" answer-save1" value="Save" class="save-btn" style="width:100px;"> 
</div>
<div><!---other content---></div>
</div>

There are quite a few submit buttons which saves the edited input of the page. Eg, change of name or adds a comment etc. When the page loads after saving/editing, the url changes. [ start?ertrer%sdsde%srerte becomes start?someother%^url but the page remains the same] How do I keep the class as current when the page loads ?

I had used this script but as the url changes when the page loads script is pointless now.

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)) { 
        $(this).closest("li").addClass("current");
    }
});

Help ????

回答1:

Modify your markup like so to include the query string value:

<ul id="menu">
    <li id="overview" class="first" data-qs="nhsyshhdyye%sdfsd"><a href="start?nhsyshhdyye%sdfsd">OVERVIEW</a></li>
    <li id="details" data-qs="ertrer%sdsde%srerte"><a href="start?ertrer%sdsde%srerte "> DETAILS</a></li>
    <!--etc.-->
</ul>

Then add a line of script, something like this:

$(document).ready(function () {
    $("ul#menu li[data-qs=" + location.search.replace("?", "") + "]").addClass("current");
});

来源：https://stackoverflow.com/questions/16152590/highlight-current-page-after-page-loads

标签

jquery

navigation