我有这个导航栏和一个本地存储脚本,它通过单击下一个或上一个来翻阅列表。当您第一次进入页面时,Overview 是要显示的第一个页面,默认情况下会突出显示(class=first)。
直到您在概览页面并单击 Next Previous 一切正常,但是当您在另一个导航菜单(例如 Qualifications)中然后单击 Next/Previous 时,页面将重定向到概览页面。它应保留在“资格”页面中,并且应突出显示资格菜单。
提出了一个想法?单击下一步>>查找导航的第x个元素>>获取url,重定向到URL。您的帮助将不胜感激。(仅供参考-单击下一个以前的更改网址)
附上图片来帮助你。
http://oi48.tinypic.com/2lo6mhe.jpg
<div id="nav">
<ul>
<li class="first"><a href="on-click-tab.html">OVERVIEW</a></li>
<li><a href="on-click-tab1.html">PERSONAL DETAILS</a></li>
<li><a href="on-click-tab2.html">QUALIFICATION</a></li>
<li><a href="on-click-tab3.html">REFERENCES</a></li>
</ul>
</div>
<script>
// 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");
}
});
</script>
<div class="next">
<input type="image" src="/images/button-right.gif" name="Next" id="Next" value="Next »" onclick="javascript:GetNext();">
</div>
-
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);