Question

我正在使用Bootstrap创建navbar并尝试使用data-spy="scroll"。但它继续将active类应用于最右边的navbar项（在这种情况下是联系人），这是不受欢迎的，我需要激活nav项，因为我向下滚动到具体部分。当我点击navbar中的项目时，跳转到特定部分就可以了。

部分HTML代码：

<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#myPage">My Logo</a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#services">Services</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="jumbotron text-center full-screen">
    <h1>Hello World</h1>
  </div>
  <div id="services" class="container-fluid text-center full-screen">Services</div>
  <div id="about" class="container-fluid text-center full-screen">about</div>
  <div id="contact" class="container-fluid text-center full-screen">Contact</div>
</body>

和CSS代码：

.full-screen {
  height: 100%;
}
.jumbotron {
  background-color: #32db61;
  color: #fff;
  font-family: Tahoma;
  padding: 254px 25px;
  margin-bottom: 0px;
}
.navbar {
  background-color: #5f5f5f;
  margin-bottom: 0;
  border: 0;
  border-radius: 0;
  z-index: 9999;
  font-size: 18px !important;
  line-height: 25px !important;
  letter-spacing: 4px;
  font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand{
  color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
  background-color: red !important;
  color: black !important;
}

Answer 1

如果您可以使用jQuery，这将完成工作：

$(document).ready(function(e){
   e.stopImmediatePropagation();
   $('.navbar-right li').removeClass('active');
  //in case you want to remove all actives after loading
  //$('.active').removeClass('active');
});

Answer 2

一旦我在html文件的开头添加了<!DOCTYPE html>代码，问题就解决了。

使用scrollSpy

2 个答案: