我正在尝试使用 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 决定自己生成的......我不知道为什么。

有帮助吗?

解决方案

显然,你必须 第一的 调用 $('#tabs').tabs("add", "#MyTab1", ...),然后将您的内容插入 #MyTab1。jQuery UI 无法将现有的#MyTab1 容器转变为选项卡。从 jQuery UI 文档来看,这一点并不明显。

其他提示

嗯,不能完全肯定,但我有同样的问题,直到我里面说,如果添加一个标题标签的LI>一个像

的文件中读取
   <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和不添加任何其他的(即只需$(“#标签”)。标签())工作正常,没有任何“添加”等(为我工作反正)。不知道,也许它可以帮助别人

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top