更改 Dijit 布局选项卡容器中一系列选项卡中一个选项卡的标签颜色

Question

我正在尝试更改dijit/layout/tabcontainer中选项卡的标签颜色以将其与其他选项卡区分开来，但我没有任何运气。

我有这个 HTML：

<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'center'" id="tc" >
<div data-dojo-type="dijit/layout/ContentPane" title="Start" id="Start" class="TabBackground"></div>
<!--bunch more tabs here-->
<div data-dojo-type="dijit/layout/ContentPane" title="Attachments" id="Attachments" class="TabProp1Fund"></div>
<div data-dojo-type="dijit/layout/ContentPane" title="Finish" id="Finish" class="TabBackground"></div>
</div>

尝试使用css：

.TabProp1Fund .dijitTab .tabLabel{  //saw this style when inspecting element
color:orange !important;
}
also tried:
.TabProp1Fund .tabLabel{
color:orange !important;
}

尝试JavaScript：

var TabAttachments = dojo.byId("Attachments");
TabAttachments.dijitTab.tabLabel.style.color="green";//dijitTab and tabLabel are undefined

任何想法我错过了什么？ 我实际上更喜欢更改选项卡颜色，但我不知道是否有此属性？

谢谢

Answer 1

这是因为该类不会在生成的选项卡菜单中复制，它仅保留在内容窗格div中，但是您可以通过搜索(在dom加载后准备就绪(来动态执行此操作使用内容窗格的类，获取它的ID并将颜色，类或任何您想要的内容应用于"tc_tablist_"+contentePaneID，以便将其应用于具有指定类的所有内容窗格。(使用道场/DOM风格(

请参阅下面的工作片段：

下面我直接将颜色应用于 dom，但最好创建类，并使用"dojo/dom-class"添加它domClass.add("someNode", "newClass");

require([
"dojo/query",
"dojo/on",
"dojo/dom",
"dojo/dom-style",
"dojo/ready",
"dijit/layout/TabContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(query, On, dom, domStyle, ready, TabContainer, ContentPane) {
ready(function() {
query(".TabProp1Fund").forEach(function(element) {
console.log(element.id)
var textNode = dom.byId("tc_tablist_"+element.id);
console.log(textNode)
if (!textNode) return;
domStyle.set(textNode, {
color: "orange"
});
});
});
});

<script>
dojoConfig = {
async: true,
parseOnLoad: true
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet" />
<div class="claro">
<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'center'" id="tc">
<div data-dojo-type="dijit/layout/ContentPane" title="Start" id="Start" class="TabBackground"></div>
<!--bunch more tabs here-->
<div data-dojo-type="dijit/layout/ContentPane" title="Attachments" id="Attachments" class="TabProp1Fund"></div>
<div data-dojo-type="dijit/layout/ContentPane" title="Finish" id="Finish" class="TabBackground"></div>

<div data-dojo-type="dijit/layout/ContentPane" title="Another orange" id="another" class="TabProp1Fund"></div>
</div> 
</div>