好的,几乎在那里,希望使用Jquery和css类(图像)在HTML ul li列表中上下导航,就像选择选项下拉工作一样,只想显示1项,而不是下拉列表按钮,但是下一个/ prev css类可以通过列表一次只显示一个项目,因此整个效果有点像微调器。 e.g。
$('.next').click (function( MOVE TO NEXT ITEM IN LIST ))
$('.prev').click (function( MOVE TO PREV ITEM IN LIST ))
列表有点像
<ul class="">
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
<li> etc ....
</ul>
<img src="but..." class="next">
<img src="but..." class="prev">
建议请 - 并提前感谢
答案 0 :(得分:3)
人们需要在发布之前检查他们的代码!上述答案都不奏效。
我解决了这个问题:
var active = 0; // starts at zero
var list = $('ul');
list.children('li').eq('0').siblings().hide(); // Hide all except first list element
$('.next').bind('click', function() {
active = active == list.children('li').length-1 ? 0 : active + 1;
});
$('.prev').bind('click', function() {
active = active == 0 ? list.children('li').length-1 : active - 1;
});
var getActive = function() {
return list.children('li').eq(active);
};
$('.prev,.next').bind('click', function() {
getActive().show().siblings().hide();
});
答案 1 :(得分:0)
var active = 0; // starts at zero
var list = $('ul');
$('.next').bind('click', function() {
active = active == list.length-1 ? 0 : active + 1;
});
$('.prev').bind('click', function() {
active = active == 0 ? list.length-1 ? active - 1;
});
var getActive = function() {
return list.children('li').eq(active);
};
现在,使用getActive()
获取活动列表元素。
更新:如果您要隐藏除活动列表项之外的所有项目,只需添加:
$('.prev,.next').bind('click', function() {
getActive().show().siblings().hide();
});
答案 2 :(得分:0)
如果我正确理解您的问题,您一次只能看到1个列表元素。要做到这一点,我会修改David的答案中的函数来做这样的事情。
var active = 0; // starts at zero
var list = $('ul');
var hideListItems = function(active) {
$.each(list, function(count, item) {
if (count !== active) {
item.css({'display': 'none'});
} else {
item.css({'display': 'block'});
}
}
};
$('.next').bind('click', function() {
active = active == list.length-1 ? 0 : active + 1;
hideListItems(active);
});
$('.prev').bind('click', function() {
active = active == 0 ? list.length-1 ? active - 1;
hideListItems(active);
});