更改 dijit 布局选项卡容器的选项卡颜色答案

【问题标题】：change tab color of dijit layout tabcontainer更改 dijit 布局选项卡容器的选项卡颜色
【发布时间】：2018-04-02 18:22:16
【问题描述】：

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

有谁知道 tabcontainer 标题颜色的 css 属性名称是什么，或者我可以在哪里找到它们？

我用的是dojo版1.12

谢谢

皮特

【问题讨论】：

标签： css dojo dijit.layout

【解决方案1】：

您可以使用.tabLabel css 类来更改 tabcontainer 的文本颜色，如果您想在 tab 的活动状态下设置颜色，只需检查.dijitTabChecked .tabLabel。

请参阅下面的工作 sn-p ：

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>

【讨论】：