Вкладки пользовательского интерфейса jQuery добавляют классы в неправильный div?
-
19-09-2019 - |
Вопрос
Я пытаюсь использовать jQuery UI 1.7.2 для добавления вкладок "на лету".Сначала я создаю div, который содержит содержимое, принадлежащее вкладке, а затем вызываю $('#tabs').tabs("добавить", ...).Пользовательский интерфейс jQuery корректно добавляет новый li в список вкладок.Однако вместо того, чтобы создавать атрибут класса в моем tab div, он создает совершенно новый tab 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>
Такие divs, как MyTab1 и т.д.это те, которые я хочу превратить в вкладки.DIVS, такие как ui-tabs-41, - это те, которые jQuery UI решает сгенерировать самостоятельно...и я не знаю почему.
Решение
Очевидно, вам придется Первый вызовите $('#tabs').tabs("добавить", "#MyTab1", ...) и только после этого вставляйте свой контент в #MyTab1.Пользовательский интерфейс jQuery не может взять ваш существующий контейнер #MyTab1 и превратить его во вкладку.Это не очевидно из документов пользовательского интерфейса jQuery.
Другие советы
хм, не совсем уверен, но у меня была такая же проблема, пока я не прочитал в документации, в которой говорилось, что, если вы добавите тег title к 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()) отлично работает без каких-либо "add" и т.д. (в любом случае, у меня сработало).Не знаю, может быть, это кому-то поможет