jquery - 页面加载后突出显示当前页面

Question

需要帮助...我有这个导航栏

    <div id="nav">
<ul>
    <li id="overview" class="first"><a href="start?nhsyshhdyye%sdfsd">OVERVIEW</a></li>
    <li id="details" class=”current”&gt;<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>

有很多提交按钮可以保存页面的编辑输入。例如，更改名称或添加评论等。当页面在保存/编辑后加载时，url 会更改。[ start?ertrer%sdsde%srerte 变为 start?someother%^url 但页面保持不变] 如何在页面加载时将类保持为最新？

我曾经使用过这个脚本，但是当页面加载脚本时 url 发生变化现在毫无意义。

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");
    }
});

帮助 ？？？？

Answer 1

像这样修改您的标记以包含查询字符串值：

<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>

然后添加一行脚本，如下所示：

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