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

这是因为类没有在生成的Tab菜单中复制，它只保留在内容窗格div中，但您可以通过使用内容窗格的类搜索（在dom加载后准备就绪）动态地执行它，获取它的ID并将颜色，类或任何内容应用于"tc_tablist_"+contentePaneID，以便将其应用于具有指定类的所有内容窗格。（使用dojo / dom-style）

见下面的工作片段：

下面我直接将颜色应用于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>

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

1 个答案: