如何在dojo的tabContainer中動態隱藏/顯示單個標簽？

Question

我在解決這個問題上遇到了麻煩。 我想要發生的事情是，當滿足特定條件時，將顯示一個選項卡，否則，該選項卡將被隱藏。 我檢查了一些類似問題的答案，他們都給出了幾乎相同的答案，就是這樣做：

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

但是，當我這樣做時，我收到消息說.style不是函數。 誰能解釋我需要如何更改可見性？

tabContainer中選定選項卡的屏幕快照

碼

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

Answer 1

如果您使用dojo 1.7+，請使用dojo / dom風格進行更好的練習。

您可以通過將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>