Question

我有很多列表项的水平导航菜单。我想只显示五个项目并隐藏其余项目。然后在导航菜单的两端添加左右箭头按钮。点击它会显示接下来的5个列表项。

<ul>
   <li><a href="#">List item 1</a></li> 
   <li><a href="#">List item 2</a></li>
   <li><a href="#">List item 3</a></li>
   <li><a href="#">List item 4</a></li>
   <li><a href="#">List item 5</a></li>
   <li class="hide"><a href="#">List item 6</a></li>
   <li class="hide"><a href="#">List item 7</a></li>
   <li class="hide"><a href="#">List item 8</a></li>
   <li class="hide"><a href="#">List item 9</a></li>
   <li class="hide"><a href="#">List item 10</a></li>
</ul>

我感谢任何帮助。

Answer 1

试一试：

HTML代码

<ul id="list">
   <li><a href="#">List item 1</a></li> 
   <li><a href="#">List item 2</a></li>
   <li><a href="#">List item 3</a></li>
   <li><a href="#">List item 4</a></li>
   <li><a href="#">List item 5</a></li>
   <li><a href="#">List item 6</a></li>
   <li><a href="#">List item 7</a></li>
   <li><a href="#">List item 8</a></li>
   <li><a href="#">List item 9</a></li>
   <li><a href="#">List item 10</a></li>
</ul>
<input type="button" name="prev" value=" prev " />
<input type="button" name="next" value=" next " />

JavaScript代码

var list = $('#list li');
reset();

function reset () {
    step = 5; // number of list items to show (by removing hidden class)
    current = 0;

    for (i=0; i< list.length; i++) {
        if ( i >= step ) { $(list[i]).addClass('hidden'); }
         else $(list[i]).removeClass('hidden');
    }
}

$('input[name="next"]').live('click', function () {

    current += step;
    threshold = current + step;
    if (threshold > list.length-1+step) { current -= step; threshold = list.length; }
    for (i=0; i < list.length; i++) {
        if ( (i >= current) && (i < threshold ) ) { $(list[i]).removeClass('hidden'); }
         else $(list[i]).addClass('hidden');
    }
});
$('input[name="prev"]').live('click', function () {
    current -= step;
    threshold = current + step;
    if (current < 0) { reset();  threshold = current + step; 
    }
    for (i=0; i < list.length; i++) {
        if ( (i >= current) && (i < threshold ) ) { $(list[i]).removeClass('hidden'); }
         else $(list[i]).addClass('hidden');
    } 
});

使用jquery显示部分导航菜单的问题

1 个答案: