导航未使用 Bootstrap ScrollSpy 更新
Navigation not updating with Bootstrap ScrollSpy
我无法使用 bootstrap ScrollSpy 让我的导航项显示为 "active"。我包括了 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 可以很好地滚动到右侧部分，但由于某些原因，导航元素没有变成 "active"。有任何想法吗？
谢谢
-- 迈克尔
您的标记代表 Bootstrap Version 3 while your using the assets (CSS and Javascript) for Version 4。一般来说，它们不可互换。如果您打算使用 v4，您将 need/want 更改您的标记以反映 v4。
v4.0.0-alpha.5 Navbar vs 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>
我无法使用 bootstrap ScrollSpy 让我的导航项显示为 "active"。我包括了 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 可以很好地滚动到右侧部分，但由于某些原因，导航元素没有变成 "active"。有任何想法吗？
谢谢
-- 迈克尔
您的标记代表 Bootstrap Version 3 while your using the assets (CSS and Javascript) for Version 4。一般来说，它们不可互换。如果您打算使用 v4，您将 need/want 更改您的标记以反映 v4。
v4.0.0-alpha.5 Navbar vs 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>