我有一个带有导航栏和 2 个超大屏幕的小 HTML 页面
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Play Home</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#" id="HomeButton">Home</a></li>
<li><a href="#Campus" id="CampusButton">Campus</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container" id="Home">
<div class="jumbotron">
<!--Content here-->
</div>
</div>
<div class="container" id="Campus">
<div class="jumbotron">
<!--Content Here-->
</div>
</div>
如何使用 JQuery 在页面上滚动时将导航栏 nav active 从一个更改为另一个？
我试过了-
$("#Home").scroll(function() {
console.log("Here");
$(".nav li").removeClass("active");
$("#HomeButton").parent().addClass("active");
});
$("#Campus").scroll(function() {
$(".nav li").removeClass("active");
$("#CampusButton").parent().addClass("active");
});
最佳答案
我认为你实际上是在寻找 scrollspy。
将此添加到您的正文标签中。
<body data-spy="scroll" data-target=".navbar">
它应该可以工作，需要注意的一件事是导航栏的 href <a>标签必须与 <div> 相同的编号。
此外，您可能应该在 id 中全部使用小写字母的，我认为这是很好的约定。 :)
如果您需要任何其他信息，请查看此链接。 http://getbootstrap.com/javascript/#scrollspy
关于jquery - 从一个 div 滚动到下一个时更改导航栏按钮的事件状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41918336/