javascript - 在左边移动一个 div，在一个 div 的右边移动另一个

Question

我正在使用 jquery 处理这个可滚动的选项卡。它工作正常，但我面临的唯一问题是两个箭头 div 的位置。它们都是 float:left 但不知何故堆叠在主选项卡容器的右侧。这两个 div 都是在运行时创建的。我希望这两个箭头 div 的位置是:左箭头 div 在开始处(制表符之前)，右箭头 div 在结尾(制表符之后)。欢迎任何帮助或建议。

JQuery 代码在下面，但要查看它是否有效，请转到此处:JSFiddle

(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;
        }; // end of functions
    })(jQuery);
    $(function () {
        $("#tabs").tabs().scrollabletab();
    });

Answer 1

您的箭头都出现在 fixedContainer 右侧的原因是因为您的 fixedContainer 也 float 到左侧。

如果您有多个带有 float: left; 的元素，它们将按照它们出现的顺序彼此相邻堆叠。您的 HTML 呈现如下:

<div class="fixedContainer"></div>   <!-- your menu tabs -->
<div role="button"></div>            <!-- your left arrow -->
<div role="button"></div>            <!-- your right arrow -->

所有这 3 个 div 都向左浮动，因此它们将彼此相邻出现。

如果您希望左箭头出现在菜单选项卡的左侧，您需要像这样重新安排结构:

<div role="button"></div>            <!-- your left arrow -->
<div class="fixedContainer"></div>   <!-- your menu tabs -->
<div role="button"></div>            <!-- your right arrow -->

为此，您需要更改左箭头的 Javascript 代码，如下所示:

ul.prepend('<div style="width: 20px; float: left; height: ' + (ops.barheight - 2) + 'px; margin-left: 5px; margin-right: 0;"></div>');
var leftArrow = ul.children().first();

这将 prepend()箭头而不是 append() , 所以它出现在 fixedContainer 之前。

JSFiddle here