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如何隐藏标签？

1 个答案: