Question

我有问题。我想使用animate（）函数来滑动导航菜单中的jQuery标签。

我使用固定宽度样式的标签容器和no。标签的数量超出了可以容纳的范围 - 因此额外的标签溢出到下一行。

我想在标签的两端放两个箭头按钮。因此，当用户点击按钮时，导航菜单会沿相应方向滑动。

我正在使用我使用jQuery UI的主题滚动功能制作的主题。选项卡的css使用相对定位，animate（）仅在使用绝对定位时有效。 jQuery选项卡的css是：

    .ui-tabs { padding: .2em; zoom: 1; }
    .ui-tabs .ui-tabs-nav { list-style: none; position: relative; padding: .1em .1em 0;   overflow: hidden;     max-height: 25px; }
     .ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 .1em -1px 0; padding: 0; }
.ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: .2em 0.7em; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px; border-bottom-width: 0; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { padding: 1em 1.4em; display: block; border-width: 0; background: none; }
.ui-tabs .ui-tabs-hide { display: none !important; }

那么有人可以建议你做一些工作来正常工作吗？

Answer 1

我要做的是将您的标签放在容器中，该容器的宽度大于容器，然后为该容器设置动画，例如。

<div id="topContainer" style="width: 800px; overflow: hidden;">
    <!-- calculate the width of #animateMe -->
    <div id="animateMe" style="width: 1250px; position: absolute;">
        ... <!-- your tabs here -->
    </div>
    ... <!-- tab content here -->
</div>

您可能无法使用jQuery UI标签功能。

编辑：稍微搞砸了一下你应该能够使用jQuery UI Tabs功能。

如何使用animate（）滑动（左侧病房或右侧病房）jQuery选项卡导航菜单？

1 个答案: