Javascript jquery.nav.js活动部分高亮显示单击后停止工作
制作一个单页网站时,我希望根据我在页面上的部分突出显示菜单。我使用jquery.nav.js插件 一切都按需工作,直到我单击其中一个菜单链接,然后在页面上移动时,菜单部分仍停留在突出显示的链接上 以下是网站: 剧本:Javascript jquery.nav.js活动部分高亮显示单击后停止工作,javascript,jquery,css,jquery-plugins,Javascript,Jquery,Css,Jquery Plugins,制作一个单页网站时,我希望根据我在页面上的部分突出显示菜单。我使用jquery.nav.js插件 一切都按需工作,直到我单击其中一个菜单链接,然后在页面上移动时,菜单部分仍停留在突出显示的链接上 以下是网站: 剧本: <script type="text/javascript" src="js/jquery.nav.min.js"></script> <script> $(document).ready(function() { $('#nav').one
<script type="text/javascript" src="js/jquery.nav.min.js"></script>
<script>
$(document).ready(function() {
$('#nav').onePageNav();
});
</script>
如果有人需要这个,我通过向每个添加类“.current”并添加到脚本来解决这个问题 JavaScript
<script>
$(document).ready(function(){
$('#nav').onePageNav({
currentClass: 'current',
scrollOffset: 0
});
});
</script>
$(文档).ready(函数(){
$('#nav')。onePageNav({
currentClass:'当前',
滚动偏移量:0
});
});
HTML:
如果我犯了错误,请纠正我
#nav {
list-style-type: none;
height: 80px;
width: 325px;
margin: auto;
float: right;
position: relative;
top: 7px;
color: #5B5B5B;
}
/*
color:#49E2D6;
*/
#nav .current a {
color: #40E4F2;
}
#nav a:hover {
color:#40E4F2;
}
#nav li {
float: left;
}
#nav a {
text-transform: uppercase;
background-position: right;
padding-right: 10px;
padding-left: 10px;
display: block;
text-decoration: none;
font-family: 'Ubuntu', sans-serif;
font-size: 13px;
font-weight: 400;
}
<script>
$(document).ready(function(){
$('#nav').onePageNav({
currentClass: 'current',
scrollOffset: 0
});
});
</script>
<ul id="nav">
<li><a href="#second" class="current">about</a></li>
<li><span class="bar">|</span></li>
<li><a href="#fourth" class="current">services</a></li>
<li><span class="bar">|</span></li>
<li><a href="#sixth" class="current">portfolio</a></li>
<li><span class="bar">|</span></li>
<li><a href="#eight" class="current">contact</a></li>
</ul>