0

我的页面上有一个列表，其中每个li代表一个不同的内容块。

我只想要一个可见的块。具有“可见”类的li是要显示的。

当我单击下一个按钮时，我希望可见类移动到下一个li。与上一个按钮相同。

当我们到达终点时，我希望它从头开始。同样，如果您在第一个上点击“上一个”，它应该转到最后一个。

我从 jquery 开始，所以我需要帮助！

HTML结构

<ul class="container">
    <li>item1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>
<button type="button" class="prev">prev</button>
<button type="button" class="next">next</button>

CSS

.container li { display:none; }
.container li.visible { display:block; }

JS

$(document).ready(function() {
    $('.container li:first-child').addClass('visible');
});

var numberOfItems =  $('.container li').size();

$('.next').click(function(){
    $('.container').find('.visible').removeClass('visible').next().addClass('visible');
});

$('.prev').click(function(){
    $('.container').find('.visible').removeClass('visible').prev().addClass('visible');
});

我被困在那里！我觉得这段代码不是很好，我需要'循环'功能。任何人都可以帮忙吗？

4

1 回答 1

2

看看这个如何使用下一个和上一个按钮交换可见列表项？链接，这将帮助您获得所需的答案。单击下一个按钮时，可见类将移动到下一个 li，这与上一个按钮相同。如果它到达末尾，它将从头开始，类似于 Prev 按钮。
//为下一个

 if (index == (length - 1)) {
            $('li').first().removeClass('invisible').addClass('visible');
        }

//上一页

if (index == 0) {
        $('li').last().removeClass('invisible').addClass('visible');
    }

我希望这会给你更多。祝一切顺利。

于 2013-02-13T11:53:21.800 回答