自举ScrollSpy
自举ScrollSpy
提问于 2016-03-21 10:05:25
大家好，我用的是自举卷轴间谍。当我点击链接，它带我到特定的部分，但我面临的问题是，当我滚动向上或向下的选项是不活跃的。我不知道我为什么要面对这个问题。请帮帮忙。这是我的密码。我
<div id="buyer_guide" data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="col-lg-6 ">
<div id="content ">
<section id="section-1">
<div class="content">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </p>
<hr />
<a href="#top">↑ Back to top</a> <a href="#" rel="next">↓ Next section</a> </div>
</section>
<section id="section-2">
<div class="content">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </p>
<hr />
<a href="#top">↑ Back to top</a> <a href="#" rel="next">↓ Next section</a> </div>
</section>
</div>
</div>
<div class="col-lg-3">
<nav id="myScrollspy" >
<ul>
<li><a href="#section-1">Section 1</a></li>
<li><a href="#section-2">Section 2</a></li>
</ul>
</nav>
</div>
</div>回答 1
Stack Overflow用户
回答已采纳
发布于 2016-03-21 12:37:46
我已经解决了你的问题。以下是解决办法：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div id="buyer_guide">
<div class="row">
<div class="col-lg-6 ">
<div id="content ">
<section id="section-1">
<div class="content">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </p>
<hr />
<a href="#top">↑ Back to top</a> <a href="#" rel="next">↓ Next section</a> </div>
</section>
<section id="section-2">
<div class="content">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </p>
<hr />
<a href="#top">↑ Back to top</a> <a href="#" rel="next">↓ Next section</a> </div>
</section>
</div>
</div>
<div class="col-lg-offset-3 col-lg-3">
<nav id="myScrollspy">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#section-1">Section 1</a></li>
<li><a href="#section-2">Section 2</a></li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html> 您应该将.nav类添加到nav、.active类中的ul元素中，作为默认的列表项之一- set数据-set=“滚动”数据-target=“#myScroll间谍”数据-偏移量=“20”属性到body标记中，而不是#buyer_guide div，您能否确保添加以下所有JS和CSS文件：
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36128007
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号