JQuery UI选项卡 - 如何防止样式应用于选项卡中的内容？

Question

我已经实现了JQuery UI选项卡,除了一个问题外,它们工作得很好......

所有我的内容的样式/类都被JQuery覆盖,我不想发生.例如,我有一个文本框:

<input type="text" id="profileFirstName" name="profileFirstName" class="textMedium" />

如果我检查Firebug中的样式,我会看到这个(按此顺序):

.ui-widget :active {
outline:medium none;
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
font-family:Verdana,Arial,sans-serif;
font-size:1em;
}

input.textMedium {
width:200px;
}

正如您所看到的,JQuery已经在我自己之前添加了ui-widget样式,因此最重要的是我的.

它在我实现选项卡的每个地方都这样做.如何将其设置为GLOBALLY以使其样式不会覆盖我的？我不希望任何jquery样式影响选项卡式内容.

我想我可以覆盖他们的ui-widget样式并且在定义下什么都不做？但我想知道是否有更清洁的方式,以便他们的ui-widget样式根本不应用.

提前致谢!

Answer 1

! important在你的风格中使用.这表明没有别的东西可以覆盖你的风格.

请查看此链接了解详情.

Answer 2

您可以使用removeClass()删除类值,但如果您这样做,小部件可能无法正常工作.

例:

$('.myitem').removeClass('ui-widget');

我建议您添加新的类值addClass()以覆盖样式

例:

$('.myitem').addClass('newClass');

或目标元素

$('p').addCLass('newClass');

并在小部件声明结束时调用该函数.

$(document).ready(function() {

    $("#MyItem").draggable();
    //here
    $("#MyItem").addClass("newClass");

});