Fatal编程技术网

Twitter bootstrap 3 Scrollspy在页面加载时激活了错误的链接

twitter-bootstrap-3

Twitter bootstrap 3 Scrollspy在页面加载时激活了错误的链接,twitter-bootstrap-3,scrollspy,Twitter Bootstrap 3,Scrollspy,出于某种奇怪的原因，scrollspy导致我的第二个列表项在页面加载时而不是第一个列表项处于活动状态。这很奇怪，因为在我用鼠标滚动一点之后，它会激活正确的列表项。除了这个错误，它的功能完美。如果有人能帮助我，我将不胜感激 这是我的html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA

出于某种奇怪的原因，scrollspy导致我的第二个列表项在页面加载时而不是第一个列表项处于活动状态。这很奇怪，因为在我用鼠标滚动一点之后，它会激活正确的列表项。除了这个错误，它的功能完美。如果有人能帮助我，我将不胜感激

这是我的html：

    <!DOCTYPE html>
    <html lang="en">
   <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">


<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

  </head>
   <body data-spy="scroll" data-target=".navbar" data-offset="111">
  <header id="home">
   <nav class="navbar navbar-default navbar-fixed-top cbp-af-header">
  <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="#">
        <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
        Determined Divas
        <span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
      </a>
    </div>

    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li  id="home" class="active"><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#whoWeAre">Who We Are</a></li>
        <li><a href="#gallery">Gallery</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>
那是因为你有

<body data-spy="scroll" data-target=".navbar" data-offset="111">
navbar类的数据目标，但html标记具有

  <div id="navbar" class="collapse navbar-collapse">
id导航条；切换其中一个，应该可以工作

引导scrollspy将查找目标，如果找不到目标或未指定目标，则默认为导航。最好将scrollspy放在只包含导航的div上

这里有一个

将您的标记放在小提琴中。。。或者类似的 
<body data-spy="scroll" data-target=".navbar" data-offset="111">

  <div id="navbar" class="collapse navbar-collapse">