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

我有个问题。我想使用animate（）函数滑动导航菜单中的PresentjQuery选项卡

我使用了一个固定宽度的标签容器，标签的数量超过了可以容纳的数量，因此额外的标签溢出到下一行

我想在选项卡的两端放置两个箭头按钮。因此，当用户单击按钮时，导航菜单将向相应方向滑动

我使用的主题是使用jQueryUI的主题滚动功能创建的。选项卡的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; }

---

所以，有谁能建议一个方法来让它正常工作吗？

我要做的是把你的标签放在一个比它的容器更宽的容器中，然后给这个容器设置动画，例如

<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选项卡功能实现这一点。

我要做的是将你的选项卡放在一个比它的容器更宽的容器中，然后设置该容器的动画，例如

<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选项卡功能实现这一点。

似乎是合理的。但是，如果我将选项卡列表（它们包含在ul中）放在div容器中（如本例中的animateMe），它会起作用吗？是的，这非常有效。谢谢我也发现这一点：似乎是有道理的。但是，如果我把标签列表（它们包含在ul中）放在一个div容器中（如本例中的animateMe），它会起作用吗？是的，这非常有效。谢谢我也发现了这个：