尝试使用 JQuery 使用 class next 和 class prev 例如滚动浏览 ul li 列表
<ul class="selectoption">
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
<li> ... </li>
</ul>
<a href="" class="next">Next</a>
<a href="" class="prev">Back</a>
唯一的问题是我只希望所选的 li 可见。那么需要以某种方式对 li 建立索引吗?非常感谢您的帮助 - 提前致谢
这应该可以做到:
// Hide all but the first
$('.selectoption li').not(':first').hide();
// Handle the click of prev and next links
$('.prev, .next').click(function() {
// Determine the direction, -1 is prev, 1 is next
var dir = $(this).hasClass('prev') ? -1 : 1;
// Get the li that is currently visible
var current = $('.selectoption li:visible');
// Get the element that should be shown next according to direction
var new_el = dir < 0 ? current.prev('li') : current.next('li');
// If we've reached the end, select first/last depending on direction
if(new_el.size() == 0) {
new_el = $('.selectoption li:'+(dir < 0 ? 'last' : 'first'));
}
// Hide them all..
$('.selectoption li').hide();
// And show the new one
new_el.show();
// Prevent the link from actually redirecting the browser somewhere
return false;
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)