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。这表明没有别的东西可以覆盖你的风格。

查看此link了解详情。

Answer 2

您可以使用removeClass()删除类值，但如果您这样做，则小部件可能无效。

例如：

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

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

示例：

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

或定位元素

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

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

$(document).ready(function() { $("#MyItem").draggable(); //here $("#MyItem").addClass("newClass"); });

Answer 3

我遇到了同样的问题并使用.removeClass解决了这个问题：dany建议：

$("#menu").tabs();
$("#menu, #menu *").removeClass(function(index, class) {
    // I want to keep these classes because I style them myself,
    // so remove them from the string of classes
    class = class.replace(/ui-tabs-nav|ui-state-active|ui-tabs-hide/,'');
    // Create array of remaining classes that begin with "ui-"
    var matches = class.match(/ui-\S+/g) || [];
    // return classes as space-delimited list
    return (matches.join(' '));
});

h / t到@fancyPT，了解.removeClass页面上的通用类删除示例。

Answer 4

我知道它一年后，但我发现UI.css文件的这一部分是样式传播的罪魁祸首：

/* Component containers
----------------------------------*/
.ui-widget { /*font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; */}
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {/* font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em;*/ }
.ui-widget-content { border: 1px solid #dddddd; background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #333333; }
.ui-widget-content a { color: #333333; }
.ui-widget-header { border: 1px solid #e78f08; background: #f6a828 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
.ui-widget-header a { color: #ffffff; }

评论它将解决大多数问题（好吧，直到你再次更新UI）。

Answer 5

您不必为标签添加任何css。只需放一条css线： .ui-tabs-hide { display:none; } 它会起作用。

Answer 6

您可以在iframe中添加标签内容，并在iframe内容的头部添加样式标记的不同样式。

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

6 个答案: