页面加载后高亮显示当前页面 [英] 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>

有很多提交按钮可以保存页面的编辑输入.例如，更改名称或添加评论等.在保存/编辑后加载页面时，URL会更改. [start?ertrer％sdsde％srerte变为start?其他％^ url，但页面保持不变]当页面加载时，如何保持该类为当前类?

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 ?

我曾经使用过此脚本，但由于页面加载脚本时URL的更改现在毫无意义.

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

帮助????

推荐答案

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

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

这篇关于页面加载后高亮显示当前页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！