可滚动标签按钮答案

【问题标题】：Scrollable Tab Buttons可滚动标签按钮
【发布时间】：2015-02-20 20:15:49
【问题描述】：

我正在准备一个选项卡数量未知的选项卡面板（动态出现）。因此，如果选项卡的数量超出屏幕大小允许的范围，我将提供导航。为此，我使用样式margin，因为我不想使用固定宽度。但问题是我无法在单击左/右箭头时一次移动一个选项卡。目前我正在单击移动20px，这是不准确的。
我确定我缺少某些东西，但我找不到它。有人可以帮忙吗？

也欢迎任何替代解决方案。

这里是jsfiddle。

【问题讨论】：

由于您的选项卡具有基于文本内容的动态宽度，您可能需要查询当前“第一个”相应的宽度。 “最后一个”标签，然后按该值调整边距。
看看下面这个使用扩展 jquery UI 标签的插件stackoverflow.com/a/45259166/2952405

标签： jquery css twitter-bootstrap

【解决方案1】：

这里是您需要的标签条代码。如果有用请投票。

JSFIDDLE

var incWidth = 0, divWidth = 0, OlWidth = 0,marginWidth = 50;
    (function($) {
        $.fn.showScrollIcons = function(){
            OlWidth = $('.checkOL').width();
            divWidth = this.width();
            if(divWidth >= OlWidth){
                $('.arrow').hide();
                if(incWidth){
//                        $('.arrow.leftArrow').show();
                        $('.arrow.leftArrow').hide();
                        $('.showTab').removeClass('showTab');
                        $('.checkOL .checkLI:first-child').addClass('showTab');
                        $('.checkOL').animate({'marginLeft':"+=" + incWidth});
                        incWidth = 0;
                    }
                }
                else{
                    $('.arrow').show();
                    if(!incWidth){
                        $('.arrow.leftArrow').hide();
                    }
                    if(divWidth + incWidth >= ( OlWidth - 12 )){
                        $('.arrow.rightArrow').hide();
                    }
                }
            };
        })(jQuery);
        $(document).ready(function(){
            $('.rightArrow').click(function(){
                var outerWidth = 0;
                var currentTab = $('.showTab');
                if(currentTab.next().length){
                    currentTab.next().addClass('showTab');
                    currentTab.removeClass('showTab');
                    outerWidth = currentTab.outerWidth();
                }
                incWidth += outerWidth;
                $('.checkOL').animate({'marginLeft':"-=" + outerWidth});
                checkArrowHide();
            });
            $('.leftArrow').click(function(){
                var outerWidth = 0;
                var currentTab = $('.showTab');
                if(currentTab.prev().length){
                    currentTab.prev().addClass('showTab');
                    currentTab.removeClass('showTab');
                    outerWidth = $('.showTab').outerWidth();
                }
                incWidth -= outerWidth;
                $('.checkOL').animate({'marginLeft':"+=" + outerWidth});
                checkArrowHide();
            });
            $('.tabBtn').showScrollIcons();
            $( window ).resize(function(){
                $('.tabBtn').showScrollIcons();
            });
            function checkArrowHide(){
                if(!incWidth){
                    $('.arrow.leftArrow').hide();
                }
                else{
                    $('.arrow.leftArrow').show();
                }
                if(divWidth + incWidth >= ( OlWidth - 12)){
                    $('.arrow.rightArrow').hide();
                }
                else{
                    $('.arrow.rightArrow').show();
                }
            }
        });

【讨论】：

【解决方案2】：

我喜欢这种风格。但这里有一个替代方案。使用overflow-x:auto;，您可以在标签失控时自动创建滚动条。

JSFiddle

【讨论】：

您好 Neoaptt，感谢您的回复。我期待轮播效果，而不是这个。