用jQuery滚动标签？

Question

我有一个水平标签菜单。这些选项卡都是li元素。我一次显示其中的5个。在左侧和右侧，我有按钮，将这些标签滚动到任一侧。我只是不确定如何实现这一目标。我可以将下面的5个标签放在不同的div中，点击后会显示吗？那不是最好的解决方案，不是吗？我可以用JavaScript或jQuery以某种方式做到这一点吗？

感谢。

Answer 1

使用div和ul或overflow: hidden为position: relative创建一个父容器position: absolute并使用固定宽度。单击下一个或上一个按钮时，请调整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;
    });
});