Javascript 引导ScrollSpy无法工作
正在测试某些引导代码,无法使Scrollspy功能正常工作 这是我的密码:Javascript 引导ScrollSpy无法工作,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,正在测试某些引导代码,无法使Scrollspy功能正常工作 这是我的密码: .box{ 边框:1px纯灰; 背景色:#D3; } .大{ 字体大小:3000%; 颜色:红色; } #div1{背景色:蓝色;} #div2{背景色:红色;} #div3{背景色:绿色;} .contentDiv{ 高度:800px; } 切换导航 你好,世界! 内容1 内容2 内容3 您应该将主体(或您正在监视的元素)的位置设置为相对。添加以下CSS规则 body { position: r
.box{
边框:1px纯灰;
背景色:#D3;
}
.大{
字体大小:3000%;
颜色:红色;
}
#div1{背景色:蓝色;}
#div2{背景色:红色;}
#div3{背景色:绿色;}
.contentDiv{
高度:800px;
}
切换导航
你好,世界!
内容1
内容2
内容3
您应该将主体
(或您正在监视的元素)的位置设置为相对
。添加以下CSS规则
body
{
position: relative;
}
根据该报告,这是必要的
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script type='text/javascript' src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style type='text/css'>
body {position:relative;}
.box {border:1px solid grey;background-color:#d3d3d3;}
.large {font-size:3000%;color:red;}
#div1 {background-color:blue;}
#div2 {background-color:red;}
#div3 {background-color:green;}
.contentDiv {height:800px;}
</style>
</head>
<body data-spy="scroll" data-target=".collapse">
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header"> <a href="" class="navbar-brand">My Website</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#div1">Page 1</a></li>
<li><a href="#div2">Page 2</a></li>
<li><a href="#div3">Page 3</a></li>
</ul>
</div>
</div>
</div>
<hr>
<h1>Hello, world!</h1>
<div class="container">
<div id="div1" class="contentDiv">Content1</div>
<hr>
<div id="div2" class="contentDiv">Content2</div>
<hr>
<div id="div3" class="contentDiv">Content3</div>
<hr>
</div>
</body>
</html>
正文{位置:相对;}
.box{边框:1px纯灰;背景色:#D3;}
.大{字体大小:3000%;颜色:红色;}
#div1{背景色:蓝色;}
#div2{背景色:红色;}
#div3{背景色:绿色;}
.contentDiv{高度:800px;}
切换导航
你好,世界!
内容1
内容2
内容3
小提琴是谢谢你,兹卡诺卡!一个大问题的简单解决方案。