我对这个问题有不同的方法，因为我认为标签的滚动是违反直觉的。我创建了一个插件来在选项卡中断到第二行时进行下拉。

https://github.com/jasonday/plusTabs

我最近正在寻找解决方案，但其他插件/示例似乎都不适用于 jQuery 1.9+，我还认为 Jason 创建“更多”选项卡并将任何额外选项卡显示为下拉列表的答案提供了最好的UI 体验，因此我扩展了他的回答并为1.9+创建了一个 jQuery 插件，它扩展了 jQuery UI 选项卡，如果所有选项卡的总宽度超过选项卡容器的宽度，则附加选项卡将组合在一个下拉列表中.

您可以查看JSFiddle Demo以了解它的运行情况。尝试调整浏览器窗口的大小以查看它是否正常工作。

或者您可以在JSFiddle查看完整的插件代码。

初始化“溢出选项卡”就像这样简单：

$("#tabs").tabs({
    overflowTabs: true,
    tabPadding: 23, 
    containerPadding: 40,
    dropdownSize: 50
});

tabPadding 是选项卡中文本周围填充的像素数。

containerPadding 是容器的填充。

dropdownSize 是下拉选择器按钮的像素大小

我已经在最新版本中测试了这个Chrome，Firefox和IE。如果您发现任何问题或可以改进这一点，请随时将其分叉并继续。

现在也可以在GitHub上找到。

这里列出的插件没有一个对我有用（大多数已经过时并且与 jQuery 2.0+ 不兼容）但我最终发现了这个：https : //github.com/joshreed/jQuery-ScrollTabs ...值得添加到列表中。

我刚刚为此制作了一个非常简单的插件。基本上，您必须向选项卡导航器添加一个固定长度的 div 和一个可移动的 div。

插件代码：

(function ($) {
var settings = {
    barheight: 38
}    

$.fn.scrollabletab = function (options) {

    var ops = $.extend(settings, options);

    var ul = this.children('ul').first();
    var ulHtmlOld = ul.html();
    var tabBarWidth = $(this).width()-60;
    ul.wrapInner('<div class="fixedContainer" style="height: ' + ops.barheight + 'px; width: ' + tabBarWidth + 'px; overflow: hidden; float: left;"><div class="moveableContainer" style="height: ' + ops.barheight + 'px; width: 5000px; position: relative; left: 0px;"></div></div>');
    ul.append('<div style="width: 20px; float: left; height: ' + (ops.barheight - 2) + 'px; margin-left: 5px; margin-right: 0;"></div>');
    var leftArrow = ul.children().last();
    leftArrow.button({ icons: { secondary: "ui-icon ui-icon-carat-1-w" } });
    leftArrow.children('.ui-icon-carat-1-w').first().css('left', '2px');        

    ul.append('<div style="width: 20px; float: left; height: ' + (ops.barheight - 2) + 'px; margin-left: 1px; margin-right: 0;"></div>');
    var rightArrow = ul.children().last();
    rightArrow.button({ icons: { secondary: "ui-icon ui-icon-carat-1-e" } });
    rightArrow.children('.ui-icon-carat-1-e').first().css('left', '2px');        

    var moveable = ul.find('.moveableContainer').first();
    leftArrow.click(function () {
        var offset = tabBarWidth / 6;
        var currentPosition = moveable.css('left').replace('px', '') / 1;

        if (currentPosition + offset >= 0) {
            moveable.stop().animate({ left: '0' }, 'slow');
        }
        else {
            moveable.stop().animate({ left: currentPosition + offset + 'px' }, 'slow');
        }
    });

    rightArrow.click(function () {
        var offset = tabBarWidth / 6;
        var currentPosition = moveable.css('left').replace('px', '') / 1;
        var tabsRealWidth = 0;
        ul.find('li').each(function (index, element) {
            tabsRealWidth += $(element).width();
            tabsRealWidth += ($(element).css('margin-right').replace('px', '') / 1);
        });

        tabsRealWidth *= -1;

        if (currentPosition - tabBarWidth > tabsRealWidth) {
            moveable.stop().animate({ left: currentPosition - offset + 'px' }, 'slow');
        }
    });


    return this;
}; })(jQuery);

在http://jsfiddle.net/Bua2d/查看

这是一个插件：http : //jquery.aamirafridi.com/jst/