如何在dojo的tabContainer中动态隐藏/显示单个选项卡？

Question

我在解决这个问题时遇到了一些麻烦。我想要发生的是，当满足某个条件时，会显示一个选项卡，如果不是，则隐藏选项卡。我已经在类似的问题中检查了几个答案，他们都给出了相同的答案，这就是做到这一点：

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

但是，当我这样做时，我收到.style不是函数的消息。任何人都可以解释我需要如何改变可见性吗？

tabContainer中所选标签的屏幕截图

代码

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

Answer 1

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

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

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

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

Answer 2

我宁愿使用选项卡的disabled属性而是覆盖它添加的CSS，而不是使用该样式。 像这样：

＆＃13;

＆＃13;

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);
    
    */

  });

＆＃13;

.tundra .dijitTabDisabled {
  display: none !important
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;