dojo：根據列表中的選擇顯示或隱藏div

Question

有沒有簡單的方法來完成這個使用dojo（jQuery會更容易，但我必須使用dojo）：我有一個簡單的無序列表。我不希望道場風格的名單（因爲它可能如果我使用了一些小部件）。當我點擊列表上的鏈接時，我想顯示與該鏈接關聯的div。然後，如果我點擊列表中的另一個鏈接，第一個div就隱藏起來，那個鏈接會顯示出來。

<div id="content"> 
<h2>Header</h2> 
<ul> 
<li><a href="#sub_content1">Link 1</a></li> 
<li><a href="#sub_content2">Link 2</a></li> 
<li><a href="#sub_content3">Link 3</a></li> 
</ul> 

<div id="sub_content1" style="display:none;"> 
<h3>Sub Content Header 1</h3> 
<p>Lorem ipsum veritas britas conflictum civa</p> 
</div> 

<div id="sub_content2" style="display:none;"> 
<h3>Sub Content Header 2</h3> 
<p>Lorem ipsum mobius ceti</p> 
</div> 


<div id="sub_content3" style="display:none;"> 
<h3>Sub Content Header 3</h3> 
<p>Lorem ipsum citrus pecto</p> 
    <ul> 
    <li>Lemons</li> 
    <li>Limes</li> 
    </ul> 
</div> 

    </div><!-- end of #content --> 

Answer 1

所以實際上你正在創建自己的tabcontainer？如果你真的想自己做你應該需要的東西是這樣的：

require(["dojo/ready", "dojo/on", "dojo/dom-attr", "dojo/dom-style", "dojo/query", "dojo/NodeList-dom"], function(ready, on, domAttr, domStyle, query) { 
    ready(function() { 
     query("ul li a").forEach(function(node) { 
      query(domAttr.get(node, "href")).forEach(function(node) { 
       domStyle.set(node, "display", "none");  
      }); 

      on(node, "click", function(e) { 
       query("ul li a").forEach(function(node) { 
        if (node == e.target) { 
         query(domAttr.get(node, "href")).forEach(function(node) { 
          domStyle.set(node, "display", "block");  
         }); 
        } else { 
         query(domAttr.get(node, "href")).forEach(function(node) { 
          domStyle.set(node, "display", "none");  
         }); 
        } 
       }); 
      }); 
     }); 
    }); 
}); 

我不知道你是多麼熟悉的道場，但它採用了查詢，將循環在列表中所有鏈接（與dojo/query和dojo/NodeList-dom模塊）（你應該提供一個類名或類似的東西來使它更容易）。然後，它將爲每個鏈接檢索與其對應的div並隱藏它，它還將連接一個點擊事件處理程序（使用dojo/on模塊）。

當有人點擊鏈接時，它會（再次）循環所有的鏈接，但這次這樣做是爲了確定哪個節點是目標節點，哪個節點不是（因此它可以隱藏/顯示相應的div） 。

我做了一個JSFiddle告訴你這個。如果還不清楚，你應該首先看看Dojo的reference guide，因爲它真正演示了大多數模塊的最常見用途。

但由於此行爲與TabContainer非常相似，所以我建議您查看TabContainer reference guide。