jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery – Bootstrap 3 Scrollspy删除活动状态大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个使用带有scrollspy和固定标头的Bootstrap的站点.我有它工作正常,但滚动问题遇到了问题.页面上有几个部分不属于主导航.当您进入这些部分时,最新的“活动”链接仍然存在.最容易在小提琴中展示问题:

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

基本上我只希望当导航栏中的目标元素实际显示显示活动状态.有任何想法吗?提前致谢!

解决方法

同样的事发生在我身上,这就是我所做的.
我不知道这是否是最好的方法,但它有效.
这是你小提琴中的代码
http://jsfiddle.net/ZGsPm/1/

您可以在忽略的部分中添加额外的列表项,并为它们添加一个类(示例中为“ignore”)和一个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中(在您调用scrollspy函数之后):

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

希望这可以帮助!

大佬总结

以上是大佬教程为你收集整理的jquery – Bootstrap 3 Scrollspy删除活动状态全部内容,希望文章能够帮你解决jquery – Bootstrap 3 Scrollspy删除活动状态所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。