[英]Twitter-Bootstrap Scrollspy
我想在菜單上實現Twitter-Bootstrap Scrollspy,這樣當用戶滾動到頁面的某個部分時,css類就會被更改。 這被證明是令人沮喪的。 我已經在使用代碼中的詞綴代碼了。
所以,從下面當用戶滾動到的LI元素我的代碼#ScrollSpyContent
我想改變類的.product_submenu_image
到.product_submenu_active
。
我怎樣才能做到這一點?
(我在java
使用jsp,所以它們可能是這里的一些java代碼。我試圖去掉它的大部分內容。)
謝謝。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/css/bootstrap.css"/>
<link rel="stylesheet" href="/css/bootstrap-responsive.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
</head>
<body>
<header></header>
<div class="row-fluid product_submenu">
<nav class="span10 offset1">
<ul class="productmenus">
<li><a href="#product_features"><div class="product_submenu_image"><img src="../img/product_computer.png" alt=""/> Product Features</div></a></li>
<li><a href="#gettingstarted"><div class="product_submenu_image product_submenu_border"><img src="../img/product_people.png" alt=""/> Getting Started</div></a></li>
<li><a href="#product_support"><div class="product_submenu_image product_submenu_border"><img src="../img/product_phone.png" alt=""/> Product Support</div></a></li>
</ul>
</nav>
</div>
<div class="container-fluid">
<nav class="row-fluid" >
<ul class="span10 offset1" data-spy="scroll">
<li class="row-fluid" id="product_features"></li> <!-- End Product Features -->
<li class="row-fluid" id="gettingstarted"></li> <!-- End Getting Started -->
<li class="row-fluid" id="product_support"></li><!-- End Product support -->
</ul>
</nav>
</div>
<footer></footer>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="/js/bootstrap.js"></script>
<script>
$(function() {
var $spy = $('.productmenus');
$spy.scrollspy({offset: 20});
$spy.bind("activate", function(e) {
//e.target is the current <li> element
var header = $(e.target).find(".product_submenu_image");
$(header).addClass('active');
});
});
</script>
</body>
</html>
CSS:
.product_submenu_image
{
background: url('../img/product_tab_default.gif');
max-height: 100%;
padding: 18% 0 18% 0;
border: none;
}
.product_submenu_image.active
{
background: blue;
/*background: url('../img/product_tab_selected.gif');*/
}
所以你需要使用這里描述的scroll spy activate
事件: http : //twitter.github.com/bootstrap/javascript.html#scrollspy
基本上你需要一些像這樣的代碼:
$(function() {
var $spy = $('.nav.nav-pills');
$spy.scrollspy({offset: 20});
$spy.bind("activate", function(e) {
// do stuff here when a new section is in view
});
});
這是一個工作示例: http : //jsfiddle.net/hajpoj/f2z6u/3/
請忽略它從底部開始的事實......不確定這是一個無關的或相關的錯誤,但重點是你可以看到激活事件是如何工作的
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.