使用jQuery滚动选项卡？

Question

我有一个水平的选项卡菜单，这些选项卡都是li元素。我总是显示其中的5个。左右两侧有按钮，可以将这些选项卡向左或向右滚动。我不确定如何实现。我可以将下一组5个选项卡放在另一个div中，在点击时显示吗？那不是最好的解决方案，对吗？我能用JavaScript或jQuery来实现这个功能吗？

谢谢。

- Denise

---

已经有一个插件可以实现这个功能：http://jquery.aamirafridi.com/jst/ - Mottie

Answer 1

为 ul 创建一个带有 overflow: hidden 和 position: relative 或 position: absolute 以及固定宽度的父容器 div。当点击下一个或上一个按钮时，调整 ul 的左侧位置。

以下是参考示例代码。这不是完整的代码。

HTML

<button id="prev">Prev</button>
<button id="next">Next</button>
<div id="container">
    <ul id="contentcont">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
         <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</div>

CSS

#container
{
    width: 330px;
    height: 300px;
    overflow: hidden;
    position: relative;
}

#contentcont
{
    width: 1000px;
    position: absolute;
}


#contentcont li
{
    width: 100px;
    float: left;
    margin-right: 10px;
    border: 1px solid #a9a9a9;
    height: 280px;
}

jQuery

$(function(){
    $("#prev").click(function(){
        $("#contentcont").animate({'left': '-=110'});
        return false;
    });
    $("#next").click(function(){
        $("#contentcont").animate({'left': '+=110'});
        return false;
    });
});

- rahul

---

调整 ul 的位置。你能给我一个例子吗？ - Denise

Rahul，我该如何告诉jQuery在单击按钮时不要在开头或结尾滑动？ - Denise