Question

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

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

有很多提交按钮可以保存已编辑的页面输入。例如，更改名称或添加注释等。保存/编辑后加载页面时，URL会更改。 [start？ertrer％sdsde％srerte成为开始？另外％^ 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");
});

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

1 个答案: