JQuery的滚动/分页标签(JQuery Scrolling/Paging Tabs)

我试图创建一个具有滚动用于不适合在页面上标签的能力的网站一个简单的标签栏。这是很简单的，不需要有任何AJAX或动态加载的内容...它只是显示的所有选项卡，当你点击一个，它需要你到另一个网页。

我已经走遍了互联网，似乎无法找到比其他任何东西： http://www.extjs.com/deploy/dev/examples/tabs/tabs-adv.html然而，这是非常沉重的，复杂的......我寻找在jQuery的一个轻量级的例子。如果有人可以帮助我将不胜感激！

Answer 1:

我结束了一个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>