jquery - css如何与 jQuery UI 选项卡不同地设置 jQuery UI 自动完成方式?

  显示原文与译文双语对照的内容

我正在使用两个 jQuery UI 小部件,自动完成和选项卡。

他们分别在 jquery.ui.autocomplete.cssjquery.ui.tabs.css 中拥有自己的样式表,但是它们在 jquery.ui.theme.css 中共享了很多样式。 更改 jquery.ui.theme.css 中的样式时,会影响自动完成和选项卡。 如何自定义用于自动完成和选项卡的样式不同?

我想要更改的一件事就是对于自动完成的background 悬停效果的圆边缘。 正确的. css 改变是

.ui-corner-all,. ui-corner-top,. ui-corner-left,. ui-corner-tl { -moz-border-radius-topleft: 0px; -webkit-border-top-left-radius: 0px; -khtml-border-top-left-radius: 0px; border-top-left-radius: 0px; }

不过我想把标签圆一点。 所以我做的改变就是改变 0px5px的半径。

时间: 原作者:

设置要自定义的样式,例如在head部分,如 below:

#my-tab. ui-corner-all, #my-tab. ui-corner-top, #my-tab. ui-corner-left, #my-tab. ui-corner-tl { -moz-border-radius-topleft: 0px; -webkit-border-top-left-radius: 0px; -khtml-border-top-left-radius: 0px; border-top-left-radius: 0px; }

my-tab 作为你的jquery用户界面标签 div id

编辑:

来自 jQuery UI 选项卡文档

你的rendred html将如下所示:


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



对于"菜单",你将重写:


#ui-tabs. ui-tabs-nav>li a { color: red!important } 



原作者:
...