Twitter bootstrap Bootstrap 3 scrollspy奇怪行为-不更新scroll上的活动类_Twitter Bootstrap_Twitter Bootstrap 3

Twitter bootstrap Bootstrap 3 scrollspy奇怪行为-不更新scroll上的活动类

twitter-bootstrap twitter-bootstrap-3

Twitter bootstrap Bootstrap 3 scrollspy奇怪行为-不更新scroll上的活动类,twitter-bootstrap,twitter-bootstrap-3,Twitter Bootstrap,Twitter Bootstrap 3,我正在以下网站上实现scrollspy（）我在标记上使用了数据属性，比如so 尽管我的DOM中的HTML结构正确，但奇怪的是scrollspy无法工作，我无法理解为什么。我已经用数据属性正确地调用了它-但是活动类（侧栏中的浅蓝色）总是应用于包含的。当用户滚动时，侧边栏不会在上动态更新活动类数据属性应该像这样应用于body标记 <body data-spy="scroll" data-target=".YOUR NAV CONTAINER"> 此外，我还确保侧栏导航结构与可

我正在以下网站上实现scrollspy（）

我在

标记上使用了数据属性，比如so

尽管我的DOM中的HTML结构正确，但奇怪的是scrollspy无法工作，我无法理解为什么。我已经用数据属性正确地调用了它-但是活动类（侧栏中的浅蓝色）总是应用于包含

的

。当用户滚动时，侧边栏不会在

上动态更新活动类

数据属性应该像这样应用于body标记

<body data-spy="scroll" data-target=".YOUR NAV CONTAINER">

此外，我还确保侧栏导航结构与可解析目标类似：

<div id="YOUR NAV CONTAINER">
     <ul class="nav">
          <li><a href="#SECTIONID">list item</a></li>
          <li><a href="#SECTIONID">list item2</a></li>
     </ul>
</div>

有什么想法吗？

经过多次尝试，我想我已经找到了问题所在

尝试简单地添加DOCTYPE：

<!DOCTYPE html>
<html lang="en">
    ...

...

Bootstrap需要HTML5 DOCTYPE，您可以在以下段落中看到它：

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>


引导101模板
你好，世界！

还需要HTML5 DOCTYPE。对于v3.0.2来说，这一点开始变得显而易见。

经过多次尝试，我想我已经找到了问题所在

尝试简单地添加DOCTYPE：

<!DOCTYPE html>
<html lang="en">
    ...

...

Bootstrap需要HTML5 DOCTYPE，您可以在以下段落中看到它：

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>


引导101模板
你好，世界！

还需要HTML5 DOCTYPE。对于v3.0.2来说，这一点开始变得显而易见。

我的DOCTYPE错误-出于某种原因，这会使页面停止工作：

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

我将DOCTYPE更改为：

<html lang="en">

而scrollspy是有效的。如果有人能详细说明原因，请这样做。

我的DOCTYPE错误-出于某种原因，这会使页面无法工作：

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

我将DOCTYPE更改为：

<html lang="en">

而scrollspy是有效的。如果有人能详细说明原因，请说明。

我有一个DOCTYPE，就是错的。我自己回答下面的问题。

不是DOCTYPE，您必须添加HTML5 DOCTYPE（

）。Bootstrap需要它。我有一个DOCTYPE-就是错误的一个。我自己回答下面的问题。

不是DOCTYPE，您必须添加HTML5 DOCTYPE（

）。引导需要它。