jquery.nav.js 活动部分突出显示点击后停止工作答案

【问题标题】：jquery.nav.js active section highlighted stop working after clickjquery.nav.js 活动部分突出显示点击后停止工作
【发布时间】：2013-12-03 21:38:53
【问题描述】：

制作一个单页网站，我希望根据我在页面上的哪个部分突出显示菜单。我使用 jquery.nav.js 插件。

一切都按需要进行，直到我单击其中一个菜单链接，然后在页面上移动时菜单部分会停留在该突出显示的链接上。

这里是网站：http://www.onepixelroom.com/londonrefurb/

脚本：

<script type="text/javascript" src="js/jquery.nav.min.js"></script>
<script>
$(document).ready(function() {
  $('#nav').onePageNav();
});
</script>

导航html：

<ul id="nav">
      <li><a href="#second" class="smoothScroll">about</a></li>
      <li><span class="bar">|</span></li>
      <li><a href="#fourth" class="smoothScroll">services</a></li>
      <li><span class="bar">|</span></li>
      <li><a href="#sixth" class="smoothScroll">portfolio</a></li>
      <li><span class="bar">|</span></li>
      <li><a href="#eight" class="smoothScroll">contact</a></li>
    </ul>

和 CSS：

#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;
}

【问题讨论】：

标签： javascript jquery css jquery-plugins

【解决方案1】：

如果有人需要这个，我通过将“.current”类添加到每个并添加到脚本来解决这个问题

JavaScript

<script>
$(document).ready(function(){
  $('#nav').onePageNav({
    currentClass: 'current',
    scrollOffset: 0
  });
});

</script>

HTML：

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

如果我犯了错误，请纠正我。

【讨论】：