dijit tabcontainer 如何隐藏选项卡？

Question

我不知道如何在选项卡容器中隐藏选项卡。到目前为止我尝试过的方法不起作用。

下面代码的结果是选项卡中的内容没有显示，但选项卡本身在那里。它似乎没有隐藏选项卡。

我希望删除整个选项卡，就好像它从未存在过一样。

<div id="center" data-dojo-type="dijit/layout/TabContainer"  controllerWidget="dijit.layout.TabController">
<div id="tab1" data-dojo-type="dijit/layout/ContentPane"  title="tab1"></div>
<div id="tab2" data-dojo-type="dijit/layout/ContentPane"  title="tab2"></div>
<div id="tab3" data-dojo-type="dijit/layout/ContentPane"  title="tab3"></div>
</div>

这只是隐藏选项卡内容

console.log(dijit.byId("tab2"));
dijit.byId("tab2").style.display= 'none';
dijit.byId("tab2").resize();

这只会使按钮变灰

 var tabContainer = dijit.byId("center"); //Tr
    var tab = dijit.byId("tab2"); //tab Id which you want to show
    tabContainer.selectChild(tab); //Show the selected Tab  
    tabContainer.getChildren()[0].controlButton.set('disabled', true);

如何完全隐藏选项卡按钮和内容，就好像它们从未存在过一样？

Answer 1

您可以使用 dojo/dom-style 隐藏选项卡，通过隐藏 controlButton.domNode 和 domNode 本身。但请务必在隐藏之前更改选定的选项卡，如下所示：

var tabContainer = registry.byId("center");
var tab1 = registry.byId("tab1");
var tab2 = registry.byId("tab2");
tabContainer.selectChild(tab2); // change tab

domStyle.set(tab1.controlButton.domNode, "display", "none");
domStyle.set(tab1.domNode, "display", "none");

请参阅下面的工作片段

require(["dojo/on", "dojo/dom", "dojo/ready", "dijit/registry","dojo/dom-construct", "dijit/layout/TabContainer", "dijit/layout/ContentPane",
  "dojo/dom-style"
], function(On, dom, ready, registry,domConstruct, TabContainer, ContentPane, domStyle) {
  ready(function() {
    var tabContainer = registry.byId("center");
    var tab1 = registry.byId("tab1");
    var tab2 = registry.byId("tab2");
    tabContainer.selectChild(tab2);
    
    domStyle.set(tab1.controlButton.domNode, "display", "none");
    domStyle.set(tab1.domNode, "display", "none");
  });
});

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#center {
  height: 100% !important;
}

<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet" />
<script>
  dojoConfig = {
    parseOnLoad: true,
    async: true
  };
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"></script>

<body class="claro">
  <div id="center" data-dojo-type="dijit/layout/TabContainer" >
<div id="tab1" data-dojo-type="dijit/layout/ContentPane"  title="tab1">tab1 </div>
<div id="tab2" data-dojo-type="dijit/layout/ContentPane"  title="tab2">tab2 </div>
<div id="tab3" data-dojo-type="dijit/layout/ContentPane"  title="tab3">tab3 </div>
</div>
</body>

dijit tabcontainer 如何隐藏选项卡？

dijit tabcontainer how do I hide a tab?

javascript

dojo

tabcontainer

dijit.layout

dijit.form