Bootstrap 3 scrollspy 奇怪的行为 - 滚动时不更新活动类 [英] Bootstrap 3 scrollspy strange behaviour - not updating active class on scroll
问题描述
我正在实施 scrollspy (http://getbootstrap.com/javascript/#scrollspy)以下网站
http://www.bestcastlesintown.co.uk/RC/php/index.php
我已经在我的 <body> 标签上使用了数据属性，就像这样 <body data-spy="scroll" data-target=".bcit-sidebar">
即使我的 DOM 中的 HTML 结构正确，但奇怪的是 scrollspy 无法正常工作，我不明白为什么.我已经用数据属性正确地调用了它 - 但是活动类(在侧栏中显示为浅蓝色)始终应用于包含 <a href="#派对游戏">派对游戏</a>.当用户滚动时，侧边栏不会在 上动态更新活动类.
数据属性应该像这样应用于body标签.
此外，我确保侧边栏导航结构与可解析目标类似:
<ul class="nav"><li><a href="#SECTIONID">列表项</a></li><li><a href="#SECTIONID">list item2</a></li>有什么想法吗?
经过多次尝试，我想我已经找到了问题...
尝试简单地添加一个 DOCTYPE :
<html lang="zh-cn">...Bootstrap 需要 HTML5 DOCTYPE，您可以在 Basic Template 段落中看到:
<头><title>Bootstrap 101 模板</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 引导程序--><link href="css/bootstrap.min.css" rel="样式表"><!-- HTML5 Shim 和 Respond.js IE8 支持 HTML5 元素和媒体查询 --><!-- 警告:如果您通过 file://查看页面，Respond.js 将不起作用 --><!--[如果是 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]--><身体><h1>你好，世界！</h1><!-- jQuery(Bootstrap 的 JavaScript 插件所必需的)--><script src="https://code.jquery.com/jquery.js"></script><!-- 包含所有已编译的插件(如下)，或根据需要包含单个文件 --><script src="js/bootstrap.min.js"></script></html>在 v2.3.2 中也提到 需要 HTML5 DOCTYPE.v3.0.2 开始变得明显.
I am implementing scrollspy (http://getbootstrap.com/javascript/#scrollspy) on the following website
http://www.bestcastlesintown.co.uk/RC/php/index.php
I have done so using data attributes on my <body> tag like so <body data-spy="scroll" data-target=".bcit-sidebar">
Even though the HTML in my DOM is structured properly strangely enough scrollspy is not working and I cannot understand why. I have called it properly with data attributes - but the active class (coloured a light blue in the sidebar) is always applied to the <li> containing the <a href="#party-games">Party Games</a>. The sidebar is not updating the active class dynamically on the <li> when the user scrolls.
The data attributes should be applied to the body tag like this.
<body data-spy="scroll" data-target=".YOUR NAV CONTAINER">
Also, I've made sure the sidebar navigation structure is like this with resolvable targets:
<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>
Any ideas?
I think I've found the problem, after many tries...
Try to simply add a DOCTYPE :
<!DOCTYPE html>
<html lang="en">
...
Bootstrap requires an HTML5 DOCTYPE, you can see it in the Basic Template paragraph :
<!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>
It was also mentioned in v2.3.2 that HTML5 DOCTYPE is required. It started to be obvious for v3.0.2.
这篇关于Bootstrap 3 scrollspy 奇怪的行为 - 滚动时不更新活动类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
