Javascript jQuery:滚动时更改页码的css
我想知道当用户滚动到#bx2时如何将#pg2的css类更改为“active”,当用户滚动到#bx3时如何将#pg3更改为“active”,等等Javascript jQuery:滚动时更改页码的css,javascript,jquery,Javascript,Jquery,我想知道当用户滚动到#bx2时如何将#pg2的css类更改为“active”,当用户滚动到#bx3时如何将#pg3更改为“active”,等等 <ul id="navi" style="position:fixed;top:0"> <li><a href="#bx1" id="pg1" class="active">1</a></li> <li><a href="#bx2" id="pg2" class="">2
<ul id="navi" style="position:fixed;top:0">
<li><a href="#bx1" id="pg1" class="active">1</a></li>
<li><a href="#bx2" id="pg2" class="">2</a></li>
<li><a href="#bx3" id="pg3" class="">3</a></li>
...
<li><a href="#bx00" id="pg100" class="">100</a></li>
</ul>
<div class="tallbigblock" id="bx1">...</div>
<div class="tallbigblock" id="bx2">...</div>
<div class="tallbigblock" id="bx3">...</div>
...
<div class="tallbigblock" id="bx100">...</div>
问题是,如果我有一个50.tallbigblock的divs。。。或动态生成的“.tallbigblock”divs
我一直在试图找出如何使jquery在不为每个div手动编码jquery的情况下为n个“.tallbigblock”div工作。。。
希望你们能帮我
非常感谢 这是未经测试的,但与原始代码的唯一区别在于它不是硬编码的,一次只允许一个框处于活动状态
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
$('#navi li a').removeClass('active');
$('.tallbigblock').each(function()
{
if(scrollTop > $(this).offset().top)
{
$('#pg'+this.id.split('x')[1]).addClass('active');
return false; // this breaks the each loop
}
});
});
根据@caller发布的代码,我修改并测试了以下代码:
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
$(".tallbigblock").each(function() {
if(scrollTop > $(this).offset().top)
{
var i = $(this).attr('id');
var nid = "#pg" + i.replace("bx", "");
$("#navi li a").removeClass("active").hasClass("active");
$(nid).addClass("active");
}
});
});
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
$(".tallbigblock").each(function() {
if(scrollTop > $(this).offset().top)
{
var i = $(this).attr('id');
var nid = "#pg" + i.replace("bx", "");
$("#navi li a").removeClass("active").hasClass("active");
$(nid).addClass("active");
}
});
});