Question

我正在准备一个tabpanel，其中标签的数量未知（动态出现）。所以我提供导航，如果有更多的选项卡，而不是屏幕尺寸允许。为了实现这一点，我使用样式margin，因为我不想使用固定宽度。但问题是我点击左/右箭头时无法一次移动一个标签。目前，我只需点击一下即可移动20px 我确信有一些我想念但我无法找到的东西。有人可以帮忙吗？

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

这是jsfiddle。

Answer 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();
                }
            }
        });

Answer 2

我喜欢这种风格。但这是另一种选择。使用overflow-x:auto;，当标签失控时，您可以自动创建滚动条。

JSFiddle

可滚动标签按钮

2 个答案: