[英]Problem showing part of navigation menu using jquery
我有很多列表项的水平导航菜单。 我只想显示五个项目并隐藏 rest。 然后在导航菜单的两端添加左右箭头按钮。 单击它会显示接下来的 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>
我很感激任何帮助。
试试看:
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');
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.