我正在使用 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>
这个问题已经过时了,但我今天遇到了这个问题,并希望帮助那些将来有需要的人找到这个问题。
确保将数据目标属性设置为导航的父元素(id/类)。我在使用 jQuery 插件 animatescroll 时遇到了类似的问题。此外,BootStrap文档指出....
需要可解析的 ID 目标
导航栏链接必须具有可解析的 id 目标。例如,家庭必须对应于 DOM 中的某些内容,例如 。
BS 文档所需的可解析 ID 目标
取而代之的是:
<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">