更改 Dijit 布局选项卡容器的选项卡颜色

Question

我正在尝试更改dijit布局tabcontainer的标题文本颜色，以便在选项卡处于活动和非活动状态时。

有谁知道选项卡容器标题颜色的 css 属性名称是什么，或者我可能会在哪里找到它们？

我正在使用道场版本1.12

谢谢

皮特

Answer 1

可以使用.tabLabelcss 类来更改 tabcontainer 的文本颜色，同样，如果要在 tab 的活动状态下设置颜色， 只需与.dijitTabChecked .tabLabel核实.

请参阅下面的工作片段：

require([
	"dojo/query",
"dojo/on",
	"dojo/dom-style",
"dijit/layout/TabContainer", 
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(query,On,domStyle,TabContainer,ContentPane) {

var tc = new TabContainer({
style: "height: 100px; width: 100%;"
},"tabContainer");
var cpOrg = new ContentPane({
title: "Tabe one",
content: "Content of tab 1"
});

tc.addChild(cpOrg);
	
var cpShared = new ContentPane({
title: "Tabe two",
content: "Content of tab 2"
});
tc.addChild(cpShared);
var cpPrivate = new ContentPane({
title: "Tabe three",
content: "Content of tab 3"
});

tc.addChild(cpPrivate);
tc.startup();



});

#tabContainer .tabLabel {
color:green;

}
#tabContainer .dijitTabChecked .tabLabel {
color:red;
font-weight:bold;
}

<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 id="tabContainer"></div>
</div>