1

私はul liこのような構造を持っています：

<div>
    <a href="#" class="next"></a>
    <a href="#" class="prev"></a>
    <ul>
        <li class="element element1"></li>
        <li class="element element2"></li>
        <li class="element element3"></li>
        <li class="element element1"></li>
        <li class="element element2"></li>
        <li class="element element3"></li>
        <li class="element element1"></li>
        <li class="element element2"></li>
    </ul>
</div>

li最初は、ページの読み込み時に最初の2つだけを表示したいと思います。.nextアンカータグをクリックすると、最初の2つがli非表示になり、次の2つが表示されます。同様.previousに反対のことをする必要があります。

4

2 に答える 2

0

非常に迅速で汚い概念

http://jsfiddle.net/ULnd5/

于 2011-07-29T18:37:08.670 に答える
0 
$(function(){

    var cur_el = 1;  

    $('.next, .prev').click(function(event){
        event.preventDefault();
        show_lis($(this).attr('class'));
    });

    function show_lis(dir){

        cur_el = (dir == 'next') ? cur_el + 2 : cur_el - 2;

        if(cur_el >= $('#my_list li').length+1)
        {
            cur_el = 1;
        }
        if(cur_el <= 0)
        {
            cur_el = $('#my_list li').length-1;
        }

        $('#my_list li').hide().siblings(':nth-child('+cur_el+')').show().next().show();
    }
});

実際のデモ: http://jsfiddle.net/AlienWebguy/kkdrs/

于 2011-07-29T18:55:13.253 に答える