Как удалить/добавить тему jQueryUI CSS из определенного элемента?

Question

У меня есть сайт wordpress с вкладками jQueryUI, которые применяются к двум различным элементам одной и той же страницы. Тем не менее, я хочу, чтобы один из этих элементов был тематическим, а другой - нет.

Я пробовал использовать .removeClass ('ui-widget'), но, конечно, он удаляет класс после применения jQueryUI, так что это то же самое, что ничего не делать.

Другой способ решения этой проблемы - применить тему только к одной вкладке, но я также не знаю, как это сделать.

Заранее спасибо.

Answer 1

Что вы имеете в виду "Не тематические"? Вкладках JQuery UI всегда тематические. Если вы хотите различать два разных набора вкладок, вы можете применить свой собственный _CSS, который переопределяет вашу тему пользовательского интерфейса. Это разметка, созданная закладки (взято из документации)

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs"> 
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"> 
    <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li> 
     <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li> 
    <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1"> 
     <p>Tab one content goes here.</p> 
    </div> 
    ... 
</div> 

Примечания: Это пример разметки, порожденная вкладок плагиным, не разметки вы должны использовать для создания вкладок. Для этого нужна только разметка

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Nunc tincidunt</a></li> 
     <li><a href="#tabs-2">Proin dolor</a></li> 
     <li><a href="#tabs-3">Aenean lacinia</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <p>Tab 1 content</p> 
    </div> 
    <div id="tabs-2"> 
     <p>Tab 2 content</p> 
    </div> 
    <div id="tabs-3"> 
     <p>Tab 3 content</p> 
    </div> 
</div>. 

Вы можете использовать идентификатор элемента для стилизации вещей.

#tabs ul li{ 
    background-color: green; 
} 

Answer 2

Каждый виджет немного отличается, но большинство из них имеют destroy method. Например, чтобы удалить стиль и поведение от кнопки виджета:

$("#yourButton").button("destroy"); 

Другим вариантом является переопределить классы CSS для этого конкретного элемента. Это не повлияет на поведение виджета.

#yourelement .ui-tabs .ui-button 
{ 
    color: red; 
} 

Answer 3

Пробовал это ?:

$(tab_not_theme).removeClass('ui-tabs'); 
$(tab_not_theme).removeClass('ui-tabs-nav'); 
$(tab_not_theme).removeClass('ui-tabs-panel');