Twitter bootstrap scrollspy不能使用nav-pills和平滑滚动
Twitter bootstrap scrollspy不能使用nav-pills和平滑滚动
提问于 2012-12-12 07:47:27
我使用Bootstrap的导航药丸作为顶部导航栏，并且我使用了一段代码来在单击药丸时滚动到页面上的某个点。我现在正在尝试让scrollspy工作，这样药丸的类将从“活动”更改为“禁用”(我有特殊的css设置，用于“禁用”类，但我没有运气。有什么想法吗？
代码如下：
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="pantastic.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Questrial|Lobster|Open+Sans:300,400|Josefin+Sans:300,400' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.slideto.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
$('.toplogo').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
$('.firstscroll').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
$('.secondscroll').click(function(){
$("html, body").animate({ scrollTop: 500 }, 600);
return false;
});
$('.thirdscroll').click(function(){
$("html, body").animate({ scrollTop: 1450 }, 600);
return false;
});
$('.fourthscroll').click(function(){
$("html, body").animate({ scrollTop: 2740 }, 600);
return false;
});
});
</script>
</head>
<body data-spy="scroll" data-target=".nav nav-pills">
<div class="navbox">
<div class="container">
<div class="row">
<div class="span5">
<a href="#"><img class="toplogo" src="navlogo.png" alt="logo"/></a>
</div>
<div class="span10 offset5">
<div class="navbuttons">
<ul class="nav nav-pills custom">
<li class="active firstscroll">
<a href="#1">Home</a>
</li>
<li class="disabled secondscroll"><a href="#secondunit">What is Pantastic?</a></li>
<li class="disabled thirdscroll"><a href="#3">About Us</a></li>
<li class="disabled fourthscroll"><a href="#4">FAQ</a></li>
<li class="disabled"><a href="#modal" data-toggle="modal"><img src="Price_Button.png" alt="Order Now" onmouseover="this.src='Price_Buttonhover.png'" onmouseout="this.src='Price_Button.png'"/></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="herounit">
<div class="container">
<h1> Introducing Pantastic! </h1>
<div class="row">
<h4> Pantastic is the easiest way to bring your iPhone panoramas to life! Simply send us your panorama, and we will print, matte, and ship it right to your doorstep. </h4>
</div>
<div id="secondunit">
<div class="row">
<img src="pricetag2.png" alt="pricetag">
</div>
</div>
</div>
</div>回答 2
Stack Overflow用户
发布于 2014-01-06 07:31:34
我知道这个问题已经过时了，但我今天有这个问题，我想帮助那些未来有需要的人找到这个问题。
确保data-target属性设置为导航的父元素(id/class)。我在使用jQuery插件animatescroll时也遇到了类似的问题。此外，BootStrap文档还声明...
需要可解析的ID目标
导航栏链接必须有可解析的id目标。例如，home必须与DOM中的内容相对应，比如。
Resolvable ID targets required per BS documentation
Stack Overflow用户
发布于 2014-08-03 07:06:04
而不是这样：
<body data-spy="scroll" data-target=".nav nav-pills">使用以下命令：
<body data-spy="scroll" data-target=".navbuttons">首先，我不确定你能不能以两个类为目标，我相信它只需要一个目标元素，在上面，你以两种方式引用目标。再加上它是一个正确的目标，它应该是父元素，但如果你要用两个类名引用一个元素，你需要这样引用它：
<body data-spy="scroll" data-target=".nav.nav-pills">页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13830445
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号