更改 dijit 布局 tabcontainer 中一系列选项卡中一个选项卡的标签颜色

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

这是因为 class 未复制到生成的选项卡菜单中，它仅保留在内容窗格中 div，但您可以通过搜索动态地执行此操作（在 dom load ) 使用 class 作为您的内容面板，获取它的 ID 并应用颜色，class 或任何您想要的 "tc_tablist_"+contentePaneID 以便将其应用于所有内容具有您指定的 class 的窗格。（使用 dojo/dom-style）

请参阅下面的工作片段：

下面我直接将颜色应用到 dom ，但最好创建 class ，然后使用 "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>

更改 dijit 布局 tabcontainer 中一系列选项卡中一个选项卡的标签颜色

change label color of one tab in a series of tabs in dijit layout tabcontainer

javascript

dojo

dijit.layout