jCarousel+；jQuery UI选项卡问题：隐藏面板列表宽度计算不正确

我试图在一个页面中放置两个转盘，每个转盘位于选项卡式导航的不同面板中，但它不起作用。我尝试对jCarousel脚本进行故障排除，但我猜问题发生在选项卡和jCarousel脚本交互时

无论如何，我的HTML或多或少是这样的：

<div id="myTabs">
  <ul><!-- Tabs navigation -->
    <li><a href="#foo">Foo</a></li>
    <li><a href="#bar">Bar</a></li>
  </ul>
  <div id="foo">
    <ul>
      <li><!-- Quite complex content inside each LI, but set width of 255px --></li>
      <!-- Dynamic number of LI. Minimum of 4 items -->
      .
      .
      .
    </ul>
  </div>
  <div id="bar">
    <!-- Another UL, just like #FOO -->
  </div>
</div>

正在正确创建第一个面板中的旋转木马。那里一切都很顺利。当我单击一个选项卡以显示隐藏面板时，就会出现问题：转盘导航不起作用，控制台抛出错误

“jCarousel:没有为项目设置宽度/高度。这将导致无限循环。正在中止…”

但是，当我尝试将属性

itemFallbackDimension

设置为

255px

时，发生的情况是隐藏面板的

UL

接收的宽度为

510px

。这正是两个

LI

元素的宽度，但UL中至少有4个元素。因此，虽然现在导航功能正常，但布局完全被破坏。（）

这些问题只发生在选项卡的隐藏面板中。我认为这是因为jCarousel在内部依赖

innerWidth（）

方法来计算

UL

的宽度，但当容器设置为

display:none

时，返回

0

——而这正是tabs隐藏面板所做的

---

如何修复它？

如果您使用的是1.8.x版或更低版本的jQuery UI，那么解决方案相当简单

在样式表中，查找.ui选项卡会隐藏并使其看起来像这样：

.ui-tabs .ui-tabs-hide {
    position: absolute;
    left: -10000px;
}

如果所选面板存在任何问题，请再次检查是否存在此问题：

.ui-tabs .ui-tabs-panel{
    left:0;
}

jQueryUI中的css显示为：无。这就是你所描述的问题的起因。旋转木马插件需要确定尺寸，但当应用display:none时，尺寸为0 x 0

---

注意：出于某种原因，jQuery1.9稍微改变了这一点。它不再向非活动面板添加ui选项卡隐藏。如果您已经在使用1.9，并且由于某种原因无法返回到1.8，请告诉我，我将帮助您解决该问题（打字时间更长，我猜您正在使用1.8或更早版本）。

哦，我明白了。。。因此，我将不设置其显示属性，而是将其隐藏在屏幕外，类似于使用

文本缩进来替换图像的文本。这是否意味着不需要设置“itemFallbackDimension”？
.ui-tabs .ui-tabs-panel{
    left:0;
}