jquery滚动/分页选项卡

最后我自己写了一个DIV,它的溢出设置为隐藏。然后使用下面的jquery移动DIV中的选项卡。

    $(document).ready(function()
    {
      $('.scrollButtons .left').click(function()
      {
        var content = $(".tabs .scrollable .content")
        var pos = content.position().left + 250;
        if (pos >= 0)
        {
            pos = 0;
        }
        content.animate({ left: pos }, 1000);
      });
      $('.scrollButtons .right').click(function()
      {
        var content = $(".tabs .scrollable .content")
        var width = content.children('ul').width();
        var pos = content.position().left - 250;
        //var width = content.width();
        if (pos <= (width * -1) + 670)
        {
            pos = (width * -1) + 600;
        }
        content.animate({ left: pos }, 1000);
      });
    });

我的HTML如下所示:

    <div class="tabs">
    <div class="scrollable">
        <div class="content">
            <ul>
                <li>Tab1</li>
                <li>Tab2</li>
                <li>Tab3</li>
                <li>Tab4</li>
                <li>Tab5</li>                    
                </ul>
        </div>
    </div>
    <div class="scrollButtons">
        <ul>
            <li>
                <div class="left">
                </div>
            </li>
            <li>
                <div class="right">
                </div>
            </li>
        </ul>
    </div>
</div>

我自己刚刚创建了一个插件: 项目首页: http://jquery.aamirafridi.com/jst

你能简单地用一个在css中设置了overflow-x:auto的DIV来包装标签吗?

我总是使用 JQuery UI tabs 作为标签的起点。您可以在网站的下载部分自定义jquery用户界面下载。如果您已经在自己的网站上使用jquery,那么这个方法应该比其他任何实现都轻。

开箱即用,jquery ui选项卡不会提供您想要的滚动。我相信这可以通过改变CSS来实现,但如果你改变站点的导航(即创建更多的级别,使用较短的标题),就更容易了。

希望这有帮助