gpt4 book ai didi

jquery - Bootstrap 3 Scrollspy 删除事件状态

转载 作者:行者123 更新时间:2023-11-30 23:43:03 26 4
gpt4 key购买 nike

我有一个使用带有滚动 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%'});

希望这有帮助!

关于jquery - Bootstrap 3 Scrollspy 删除事件状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22915413/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com