JQuery UI選項卡 - 如何防止樣式應用於選項卡中的內容？

我已經實現了JQuery UI選項卡，它們工作得很好，除了一個問題...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部件樣式我自己，從而壓倒我的。

它正在這樣做，我已經實現了標籤。我如何設置GLOBALLY以便其樣式不會覆蓋我的？我不希望任何影響標籤內容的jquery樣式。

我想我可以重寫他們的UI小部件樣式，並在定義下不做任何事情？但我想知道是否有更清晰的方式，以便他們的UI widget樣式根本不適用。

在此先感謝！

來源

2010-09-21 Cheeky

在您的款式中使用! important。這表明沒有別的東西應該覆蓋你的樣式。

查看詳情，請點擊這裏link。

來源

2010-09-21 05:33:54

謝謝Vinay。我試圖避免這種情況，因爲標籤內容中包含許多不同風格和類別的內容，並且不想爲了容納標籤而去改變每一種風格。感謝您的文章！雖然重要 - 我一直認爲這是一個黑客，防止風格被重寫，但我現在看到它實際上是css的一部分。 – Cheeky 2010-09-21 05:40:06

我不相信使用！重要的是一個很好的解決方案。考慮你的身體字體樣式。如果你在你的身體字體上設置！重要，你將失去在其他地方重寫該字體的能力。我個人認爲你最好的選擇是動態刪除jQuery的類名，並重新設計缺少的部分。 – 2012-04-20 00:48:26

您可以將標籤內容放在iframe中，並在iframe內容的頭部添加樣式標籤的不同樣式。

來源

2010-09-21 07:08:45 jcubic

您可以使用removeClass()刪除類的值，但如果您這樣做，該小部件可能不起作用。

例如：

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

我建議你使用addClass()來此改變風格

例如增加新的類值：

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

或目標元素（S ）

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

並在小部件聲明結束時調用該函數。

$(document).ready(function() { 

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

});

來源

2010-09-21 09:57:24 Zebra

嗨 - 謝謝，但如前所述，有很多輸入，每個都有不同的類。這樣做並不現實。如前所述，我可以通過覆蓋ui-widget樣式來實現。這需要最少量的編碼，併爲整個網站的jquery選項卡的所有實現工作。但是，我認爲可能會有更有效或「正式」的方式來阻止這種情況的發生。 – Cheeky 2010-09-21 10:51:22

我有同樣的問題，並解決它使用.removeClass作爲丹妮建議：

$("#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頁面上他一般去除類的例子。

來源

2011-03-22 18:23:19

你不必包含任何標籤的CSS。只要放一條CSS線： .ui-tabs-hide { display:none; } 它會工作。

來源

2011-07-07 15:57:58 Adina

我知道它一年以後，但我發現了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）。

來源

2011-09-07 18:41:15

JQuery UI選項卡 - 如何防止樣式應用於選項卡中的內容？

回答

相關問題