我无法使用 bootstrap ScrollSpy 将导航项显示为“事件”。我已经包含了 bootstrap.js (Bootstrap v4.0.0-alpha.5) 和 jquery.min.js (3.1.1)。
我在 body 元素中设置了 data-spy 和 data-target，如下所示；
<body data-spy="scroll" data-target=".navbar">
我的导航部分如下所示；
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand page-scroll" href="#page-top">Logo Here</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse66" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse66">
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="#page-top">About</a></li>
<li><a class="page-scroll" href="#section-portfolio">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
链接#page-top和#section-portfolio可以很好地滚动到右侧部分，但由于某种原因，导航元素没有变得“事件” 。有任何想法吗？
谢谢
——迈克尔
最佳答案
您的标记代表 Bootstrap Version 3当您使用 Version 4 的资源(CSS 和 Javascript)时。一般来说，它们是不可互换的。如果您打算使用 v4，您将需要/想要更改标记以反射(reflect) v4。
v4.0.0-alpha.5 Navbar与 v3.3.7 Navbar
工作 v4 示例:
body {
position: relative;
}
section {
padding: 100px 50px 50px;
height: 750px;
}
#about {
background: #ffebee;
}
#projects {
background: #f44336;
}
#contact {
background: #d32f2f;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<body data-spy="scroll" data-target=".navbar">
<nav class="navbar navbar-dark bg-primary navbar-fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav float-xs-right">
<li class="nav-item">
<a class="nav-link" href="#about">About <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</nav>
<section id="about">
<h1>About</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</section>
<section id="projects">
<h1>Projects</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</section>
<section id="contact">
<h1>Contact</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
</body>工作 v3 示例:
body {
position: relative;
}
section {
padding: 100px 50px 50px;
height: 750px;
}
#about {
background: #ffebee;
}
#projects {
background: #f44336;
}
#contact {
background: #d32f2f;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body data-spy="scroll" data-target=".navbar">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo Here</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">About</a>
</li>
<li><a href="#projects">Projects</a>
</li>
<li><a href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<section id="about">
<h1>About</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</section>
<section id="projects">
<h1>Projects</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</section>
<section id="contact">
<h1>Contact</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>关于javascript - 导航未使用 Bootstrap ScrollSpy 更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41205842/