Bootstrap 3 Scrollspy删除活动状态 [英] Bootstrap 3 Scrollspy remove active state
问题描述
我有一个使用带有scrollspy和固定标头的Bootstrap的站点。我有它工作正常，但滚动问题遇到了问题。页面上有几个部分不属于主导航。当您进入这些部分时，最新的活动链接仍然存在。最容易用小提琴演示这个问题：
I have a site using Bootstrap with scrollspy and a fixed header. I have it working fine, but have run into a problem with scrollspy. There are a couple sections on the page that aren't part of the main navigation. When you're in these sections, the most recent 'active' link remains. Easiest to demonstrate the issue in a 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...
基本上我只希望活跃状态在目标元素出现时显示从导航栏实际显示。有任何想法吗？在此先感谢！
Basically I only want the active state to show when a targeted element from the navbar is actually showing. Any ideas? Thanks in advance!
推荐答案
同样的事情发生在我身上，这就是我的所作所为。
我不喜欢不知道这是不是最好的方法，但它有效。
这是你小提琴中的代码：
http://jsfiddle.net/ZGsPm/1/
The same happened to me, this is what I did.
I don't know if it's the best way to do it but it works.
Here's the code in your fiddle:
http://jsfiddle.net/ZGsPm/1/
您可以在忽略的部分添加额外的列表项并添加他们是一个类（在示例中为忽略）和一个id。
You add extra list items where your ignored sections go and add them a class ("ignore" in the example) and an 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添加到这些部分，以便您可以从列表项中引用它们。
Then you add the corresponding id to those sections so you can reference them from the list item.
<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中（在调用scrollspy函数之后）：
And finally, in Javascript (after you called the scrollspy function):
$('.ignore').css({'visibility':'hidden', 'width':'0%'});
希望这有帮助！
这篇关于Bootstrap 3 Scrollspy删除活动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
