我如何在 dojo 的 tabContainer 中动态 hide/show 单个选项卡？

Question

我在解决这个问题时遇到了一些问题。我想要发生的是，当满足特定条件时，将显示一个选项卡，否则，将隐藏该选项卡。我检查了一些类似问题的答案，他们都给出了几乎相同的回答，就是这样做：

dojo.style("tabContainer", "visibility", "visible");

但是，当我执行此操作时，我收到 .style 不是函数的消息。谁能解释我需要如何改变可见性？

tabContainer 中所选选项卡的屏幕截图

代码

this.tabContainer.getChildren()[0].style("visibility", "visible");

Answer 1

如果您使用 dojo 1.7+，请使用 dojo/dom-style 以获得更好的练习。

您可以通过将 css 添加到 tab.controlButton 来隐藏选项卡。像这样：

domStyle.set(tab.controlButton.domNode, "visibility", "hidden");

看这里https://jsfiddle.net/an90dr/ep32anm8/

Answer 2

与其玩弄样式，我宁愿使用选项卡的 disabled 属性并覆盖它添加的 CSS。像这样：

require([
    "dijit/layout/TabContainer",
    "dijit/layout/ContentPane",
    "dojo/domReady!"
  ],

  function(TabContainer, ContentPane) {

    var tabContainer = new TabContainer({}, "tabContainer");
    tabContainer.startup();

    var cp1 = new ContentPane({
      title: "Pane 1",
      content: "Pane 1"
    });
    tabContainer.addChild(cp1);

    var cp2 = new ContentPane({
      title: "Pane 2",
      content: "Pane 2"
    });
    tabContainer.addChild(cp2);


    //make sure you did not selected the tab you are going to hide
    tabContainer.selectChild(cp2);
    //disable the tab. It will be hidden by the css class 'dijitTabDisabled'
    cp1.controlButton.set('disabled', true);

    /*
    Note:
    
    cp1 = tabContainer.getChildren()[0];
    cp2 = tabContainer.getChildren()[1];
    
    so you could write:
    
    tabContainer.selectChild(tabContainer.getChildren()[1]);
    tabContainer.getChildren()[0].controlButton.set('disabled', true);
    
    */

  });

.tundra .dijitTabDisabled {
  display: none !important
}

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css">

<div class="tundra">
  <div id="tabContainer">

  </div>
</div>

我如何在 dojo 的 tabContainer 中动态 hide/show 单个选项卡？

How do I dynamically hide/show a single tab within dojo's tabContainer?

javascript

dojo