jquery - 如何从特定元素中删除/添加 jQueryUI CSS 主题？

Question

我有一个 wordpress 网站，其中 jQueryUI 选项卡应用于同一页面的两个不同元素。但是，我想要其中一个元素以主题为主题，而另一个没有主题。

我尝试使用 .removeClass('ui-widget') 但当然它会在应用 jQueryUI 后删除该类，所以这与什么都不做是一样的。

解决此问题的另一种方法是将主题仅应用于一个选项卡，但我也不知道该怎么做。

提前致谢。

Answer 1

“非主题”是什么意思？jQuery UI 选项卡总是主题化的。如果您想区分两组不同的选项卡，您可以应用自己的自定义 _CSS 来覆盖您的 UI 主题。这是由选项卡创建的标记(取自文档)

<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>.

您可以使用元素的 id 来设置样式。

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