Fatal编程技术网

Twitter bootstrap 无法使引导程序3 scrollspy正常工作

twitter-bootstrap

Twitter bootstrap 无法使引导程序3 scrollspy正常工作,twitter-bootstrap,scrollspy,Twitter Bootstrap,Scrollspy,我已经阅读了很多关于这个主题的问题，并尝试了很多不同的方法，但由于某些原因，我无法让scrollspy工作 最近： <body data-spy="scroll" data-target="#myScrollSpy"> 还有我的导航栏： <!-- Main Navigation --> <nav id="myScrollSpy"> <div class="collapse navbar-collapse navHeaderCollapse"

我已经阅读了很多关于这个主题的问题，并尝试了很多不同的方法，但由于某些原因，我无法让scrollspy工作

最近：

<body data-spy="scroll" data-target="#myScrollSpy">
还有我的导航栏：

<!-- Main Navigation -->
<nav id="myScrollSpy">
    <div class="collapse navbar-collapse navHeaderCollapse">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#" data-id="section1" class="scroll-link">Portfolio</a></li>
            <li><a href="#" data-id="section2" class="scroll-link">About</a></li>
            <li><a href="#" data-id="section3" class="scroll-link">Team</a></li>
            <li><a href="#" data-id="section4" class="scroll-link">Services</a></li>
            <li><a href="#" data-id="section5" class="scroll-link">Contact</a></li>
        </ul>
    </div>
</div>



    

  • 

  • 

  • 

  • 

  •
更新：我意识到我意外地用
关闭了
，修复了什么也没发生的问题。还尝试取出
并使用此
，但也不起作用。我还认为没有活动状态可能是问题所在，所以我在css中添加了
ul.nava:active{color:#fff；}
，但这也不起作用

Live版本为每个部分添加一个唯一的id，如下所示。（你已经有了）

不为活动链接指定样式。因此，您无法查看更改。但是如果您检查代码，您将看到
active
类已添加到导航的
li
元素中。 要查看更改，请应用活动样式，如下所示-

#myScrollSpy .nav > li.active a {
    color: #fff;
}
我对此进行了一次尝试，但由于某些原因，我仍然无法使用它，我如何指定导航链接的颜色，我假设它是活动的，我没有看到对
href
的任何更改。它的值与以前相同-
您似乎已经修改了导航。现在您用
包装了
ul
元素。因此，我的建议是使用
mycrollspy
id到这个
div
，而不是
nav
。很抱歉，我尝试了两种不同的方法，我尝试了你建议的方法（它现在在live site上更新了），但也不起作用。我也尝试了与现在相同的方法，但在导航中使用了
和
mycrollspy
，但仍然不起作用
id=“#mycrollspy”
将其替换为
id=“mycrollspy”
<li><a href="#section1">Portfolio</a></li>

#myScrollSpy .nav > li.active a {
    color: #fff;
}