jquery之Bootstrap 3 Scrollspy 删除事件状态

我有一个使用带有滚动 spy 和固定标题的 Bootstrap 的网站。我的工作正常，但在滚动 spy 方面遇到了问题。页面上有几个部分不属于主导航。当您进入这些部分时，最新的“事件”链接仍然存在。最简单地用 fiddle 演示这个问题:

http://jsfiddle.net/eric1086/R7S9t/1/

<body data-spy="scroll" data-target=".main-nav"> 
<nav class="main-nav"> 
  <ul class="nav"> 
    <li><a href="#first">First</a></li> 
    <li><a href="#second">Second</a></li> 
    <li><a href="#third">Third</a></li> 
    <li><a href="#fourth">Fourth</a></li> 
    <li><a href="#fifth">Fifth</a></li> 
  </ul> 
</nav> 
 
<section class="no-spy"> 
    Don't spy me! 
</section> 
<section class="block" id="first"> 
    First 
</section> 
etc... 

基本上，我只想在导航栏中的目标元素实际显示时显示事件状态。有任何想法吗？提前致谢!

请您参考如下方法:

同样的事情发生在我身上，这就是我所做的。
我不知道这是否是最好的方法，但它确实有效。
这是你的 fiddle 中的代码: http://jsfiddle.net/ZGsPm/1/

您可以在忽略的部分所在的位置添加额外的列表项，并为它们添加一个类(示例中的“忽略”)和一个 ID。

<body data-spy="scroll" data-target=".main-nav"> 
<nav class="main-nav"> 
  <ul class="nav"> 
    <li class="ignore"><a href="#no-spy-first"></a></li> 
    <li><a href="#first">First</a></li> 
    <li><a href="#second">Second</a></li> 
    <li><a href="#third">Third</a></li> 
    <li><a href="#fourth">Fourth</a></li> 
    <li><a href="#fifth">Fifth</a></li> 
    <li class="ignore"><a href="#no-spy-second"></a></li> 
  </ul> 
</nav> 

然后将相应的 ID 添加到这些部分，以便您可以从列表项中引用它们。

<section class="no-spy" id="no-spy-first"> 
    Don't spy me! 
</section> 
 
<section class="block" id="first"> 
    First 
</section> 
... 
<section class="no-spy last" id="no-spy-second"> 
    Don't spy me! 
</section> 

最后，在 Javascript 中(在调用 rollspy 函数之后):

$('.ignore').css({'visibility':'hidden', 'width':'0%'}); 

希望这有帮助!