分機js 4.0.2a：更改標籤顏色

Question

我需要更改操作上單個標籤的顏色。 所以我這樣做

activeTab.tab.el.dom.className = 'tv-x-tab'; 

並添加CSS樣式。

/* line 58, ../../extjs/themes/stylesheets/ext4/default/mixins/_frame.scss */ 
.tv-x-tab .x-tab-default-top { 
-moz-border-radius-topleft: 4px; 
-webkit-border-top-left-radius: 4px; 
-o-border-top-left-radius: 4px; 
-ms-border-top-left-radius: 4px; 
-khtml-border-top-left-radius: 4px; 
border-top-left-radius: 4px; 
-moz-border-radius-topright: 4px; 
-webkit-border-top-right-radius: 4px; 
-o-border-top-right-radius: 4px; 
-ms-border-top-right-radius: 4px; 
-khtml-border-top-right-radius: 4px; 
border-top-right-radius: 4px; 
-moz-border-radius-bottomright: 0; 
-webkit-border-bottom-right-radius: 0; 
-o-border-bottom-right-radius: 0; 
-ms-border-bottom-right-radius: 0; 
-khtml-border-bottom-right-radius: 0; 
border-bottom-right-radius: 0; 
-moz-border-radius-bottomleft: 0; 
-webkit-border-bottom-left-radius: 0; 
-o-border-bottom-left-radius: 0; 
-ms-border-bottom-left-radius: 0; 
-khtml-border-bottom-left-radius: 0; 
border-bottom-left-radius: 0; 
padding: 3px 3px 0 3px; 
border-width: 1px 1px 0 1px; 
border-style: solid; 
background-image: none; 
background-color: white; 

} 

/* line 91, ../../extjs/themes/stylesheets/ext4/default/mixins/_frame.scss */ 
    .tv-x-tab .x-nlg .x-tab-default-top-mc { 
    background-image: url('/themes/images/default/tab/tab-pnl-top-bg.gif'); 
    background-color: white; 
} 

/* line 104, ../../extjs/themes/stylesheets/ext4/default/mixins/_frame.scss */ 
.tv-x-tab .x-nbr .x-tab-default-top { 
    padding: 0 !important; 
    border-width: 0 !important; 
-moz-border-radius: 0px; 
-webkit-border-radius: 0px; 
-o-border-radius: 0px; 
-ms-border-radius: 0px; 
-khtml-border-radius: 0px; 
border-radius: 0px; 
background-color: transparent; 
background-position: 1100404px 1000000px; 
} 

/* line 147, ../../extjs/themes/stylesheets/ext4/default/mixins/_frame.scss */ 
.tv-x-tab .x-nbr .x-tab-default-top-tl, 
.tv-x-tab .x-nbr .x-tab-default-top-bl, 
.tv-x-tab .x-nbr .x-tab-default-top-tr, 
.tv-x-tab .x-nbr .x-tab-default-top-br, 
.tv-x-tab .x-nbr .x-tab-default-top-tc, 
.tv-x-tab .x-nbr .x-tab-default-top-bc, 
.tv-x-tab .x-nbr .x-tab-default-top-ml, 
.tv-x-tab .x-nbr .x-tab-default-top-mr { 
    zoom: 1; 
    background-image: url('/themes/images/default/tab/tab-pnl-top-corners.gif'); 
} 
/* line 168, ../../extjs/themes/stylesheets/ext4/default/mixins/_frame.scss */ 
.tv-x-tab .x-nbr .x-tab-default-top-ml, 
.tv-x-tab .x-nbr .x-tab-default-top-mr { 
zoom: 1; 
background-image: url(/themes/images/default/tab/tab-pnl-top-sides.gif'); 
    background-position: 0 0; 
} 

/* line 200, ../../extjs/themes/stylesheets/ext4/default/mixins/_frame.scss */ 
.tv-x-tab .x-nbr .x-tab-default-top-mc { 
    padding: 0 0 0 0; 
} 

但它不工作。 我在這裏做錯了什麼？有人可以建議如何做到這一點。 我必須改變一個標籤的顏色。

Answer 1

你在這裏犯了一些錯誤。

1. 你消滅所有的類名，並與「TV-X標籤」取代它們，而不是加入這個類的名字，這是你似乎什麼想做的事，因爲你的CSS仍取決於「 x-tab-default-top「在那裏。

   因此，假設activeTab是您當前的活動標籤參考，更改

   activeTab.tab.el.dom.className = 'tv-x-tab';

   到

   activeTab.tab.el.addCls('tv-x-tab');

   這將添加類名而不刪除其他的。

2. 您的CSS選擇器是不正確的語法。你已經寫過，就好像「x-tab-default-top」是「tv-x-tab」的孩子，但它們實際上是相同的元素，所以你需要刪除選擇器之間的空間。

   變化

   .tv-x-tab .x-tab-default-top { 
   

   到

   .tv-x-tab.x-tab-default-top { 
   

   這應該設置你。