jQuery UI 选项卡将类添加到错误的 div？答案

【问题标题】：jQuery UI Tabs adds classes to wrong div?jQuery UI 选项卡将类添加到错误的 div？
【发布时间】：2010-01-10 19:09:02
【问题描述】：

我正在尝试使用 jQuery UI 1.7.2 即时添加选项卡。首先，我创建包含属于选项卡的内容的 div，然后调用 $('#tabs').tabs("add",...)。 jQuery UI 在标签列表中正确添加了一个新的 li。但是，它不是在我的选项卡 div 上创建类属性，而是创建一个带有一些虚假 id 的全新选项卡 div，并在其上创建类。

这是它生成的标记：

<div id="tabs" class="ui-tabs ui-widget ui-widget-content">
  <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
  <li class="ui-state-default"><a href="#ui-tabs-41"><span>Tab 1</span></a></li>
  <li class="ui-state-default"><a href="#ui-tabs-36"><span>Tab 2</span></a></li>
  <li class="ui-state-default"><a href="#ui-tabs-27"><span>Tab 3</span></a></li>
  </ul>

  <div id="MyTab1"><img src="/1.jpg"/></div>
  <div id="ui-tabs-41" class="ui-tabs-panel ui-widget-content ui-tabs-hide"/>
  <div id="ui-tabs-36" class="ui-tabs-panel ui-widget-content ui-tabs-hide"/>
  <div id="ui-tabs-27" class="ui-tabs-panel ui-widget-content"/>
  <div id="MyTab2"><img src="/2.jpg"/></div>
  <div id="MyTab3"><img src="/3.jpg"/></div>

像 MyTab1 之类的 div 是我想要变成标签的那些。像 ui-tabs-41 这样的 div 是 jQuery UI 决定自己生成的……我不知道为什么。

【问题讨论】：

你的标记看起来像 jQuery 之前的变化吗？

标签： jquery jquery-ui jquery-ui-tabs

【解决方案1】：

显然，您必须首先调用 $('#tabs').tabs("add", "#MyTab1", ...)，然后才将您的内容插入#MyTab1 . jQuery UI 不能把你现有的#MyTab1 容器变成一个标签。这在 jQuery UI 文档中并不明显。

【讨论】：

【解决方案2】：

嗯，不完全确定，但是我遇到了同样的问题，直到我读到文档中说，如果你在 li>a 中添加一个标题标签

   <div id=tabs>
   <ul>
   <li><a href="#Tab1" title="Tab1">Tab 1 Head</a></li>
   </ul>
    <div id=Tab1>tab 1 content</div>
   </div>

它确实使用预定义的 div 并且不添加任何其他的（即只是 $("#tabs").tabs() ）在没有任何“添加”等的情况下工作正常（无论如何对我有用）。不知道，也许它可以帮助某人

【讨论】：