我有一个简单的 bootstrap 3 scrollspy 问题,当我向上/向下滚动页面时,'active' li 标签没有被激活。 scrollspy 的其他一切都按预期工作。
我已经看到了所有其他与此相关的堆栈溢出问题,并在 jsfiddle 中进行了大约两个小时的实验,但没有任何进展。
使用开发工具和设置以及 li 到 :active 手动显示所需的效果。
HTML
<header>
<nav class="navbar navbar-default navbar-fixed-top" id="spy-navbar">
<div class="container text-center">
<ul class="nav navbar-nav inline">
<li> <a href="#one" class="smooth-scroll">ONE</a> </li>
<li> <a href="#two" class="smooth-scroll">TWO</a> </li>
<li> <a href="#three" class="smooth-scroll">THREE</a> </li>
<li> <a href="#four" class="smooth-scroll">FOUR</a> </li>
</ul>
</div>
</nav>
</header>
<main class="container">
<article id="one">one</article>
<article id="two">two</article>
<article id="three">three</article>
<article id="four">four</article>
</main>
</body>
CSS
li > a:hover,
li:active {
border-bottom: 2px solid #2d9fff;
}
我的 jsfiddle 链接位于: https://jsfiddle.net/hswg5j3q/
任何人都可以查看我的 jsfiddle,看看我缺少什么吗?非常感谢。
最佳答案
这是因为你的 fiddle 不包含bootstrap.js
。 ScrollSpy 组件需要 JS。
在 Bootply 上工作: http://bootply.com/wJHL1Vqpdi
关于css - Bootstrap scrollspy 事件选择器不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35774137/