0

有没有一种简单的方法可以使用 dojo 完成此操作（jQuery 对我来说更容易，但我必须使用 dojo）：我有一个简单的无序列表。我不希望 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 -->
4

1 回答 1

1

所以实际上你正在创建自己的标签容器？如果你真的想自己做，你可能需要这样的东西：

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 有多熟悉，但它使用一个查询来循环列表中的所有链接（使用dojo/queryanddojo/NodeList-dom模块）（您应该提供一个类名或类似的东西以使其更容易）。然后，对于每个链接，它会检索与它对应的 div 并将其隐藏，它还将一个 click 事件处理程序连接到它（使用dojo/on模块）。

当有人单击该链接时，它将（再次）循环所有链接，但这次它这样做是为了确定哪个节点是目标节点，哪个不是（因此它可以隐藏/显示相应的 div）。

我制作了一个JSFiddle来向您展示这一点。如果仍有不清楚的地方，您应该首先尝试查看 Dojo 的参考指南，因为它确实展示了大多数模块的最常见用途。

但由于这种行为与 TabContainer 非常相似，我建议您查看TabContainer 参考指南。

于 2013-04-09T19:47:11.047 回答