javascript - JQuery 滚动/分页选项卡

Question

我正在尝试为一个网站创建一个简单的标签栏，它能够滚动页面上不适合的标签。这非常简单，不需要任何 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>