JQuery ul li点击移动到列表中的下一个

Question

好吧，几乎在那里，寻找使用Jquery和css类（图像）来上下浏览HTML ul li列表，就像选择选项下拉菜单一样，只需要只显示1个项目，不是下拉按钮，而是一个next/prev css类，通过列表只显示一个项目，因此整个效果有点像微调。例如

$('.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"> 

建议请 - 并在此先感谢

Answer 1

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()获取活动列表元素。

UPDATE：如果要隐藏除活动列表项的所有项目，只需添加：

$('.prev,.next').bind('click', function() { 
    getActive().show().siblings().hide(); 
}); 

Answer 2

如果我理解你的问题正确，你只需要在一个时间1个列表元素是可见的。要做到这一点，我会修改大卫的答案功能做这样的事情。

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); 
}); 

Answer 3

人们在发布之前需要检查他们的代码！以上答案都不起作用。

我fixt它：

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(); 
});