List dojo:根据列表中的选择显示或隐藏div
有没有一种简单的方法可以使用dojo来实现这一点(jQuery对我来说更容易,但我必须使用dojo):我有一个简单的无序列表。我不想让dojo为列表设置样式(如果我使用一些小部件的话)。单击列表上的链接时,我希望显示与该链接关联的div。然后,如果单击列表中的另一个链接,则第一个div将隐藏,而该div将显示List dojo:根据列表中的选择显示或隐藏div,list,dojo,hide,show,List,Dojo,Hide,Show,有没有一种简单的方法可以使用dojo来实现这一点(jQuery对我来说更容易,但我必须使用dojo):我有一个简单的无序列表。我不想让dojo为列表设置样式(如果我使用一些小部件的话)。单击列表上的链接时,我希望显示与该链接关联的div。然后,如果单击列表中的另一个链接,则第一个div将隐藏,而该div将显示 <div id="content"> <h2>Header</h2> <ul> <li><a href="#sub_c
<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 -->
标题
子内容标题1
知识产权与真理英国冲突
子内容标题2
同侧耳
子内容标题3
桔梗
- 柠檬
- 酸橙
那么实际上您正在创建自己的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有多熟悉,但它使用的查询将循环列表中的所有链接(使用Dojo/query
和Dojo/NodeList dom
模块)(您应该提供一个类名或类似的名称以使其更简单)。然后,对于每个链接,它将检索对应于它的div并将其隐藏,它还将连接一个click事件处理程序(使用dojo/on
模块)
当有人单击链接时,它将(再次)循环所有链接,但这次它这样做是为了确定哪个节点是目标节点,哪个不是(因此它可以隐藏/显示相应的div)
我拍了一张照片给你看。如果还有什么不清楚的地方,您应该首先尝试查看Dojo的功能,因为它确实演示了大多数模块的最常用用法
但由于此行为与TabContainer非常相似,我建议您查看。作为一个有趣的问题,您应该真正提到您使用的是哪个版本的dojo。早期版本与异步模式下运行的1.7/1.8有很大的不同。谢谢!我对dojo不太熟悉。这在jQuery中非常简单,但我必须在特定的项目中使用dojo。没问题,dojo也非常类似于jQuery,您只需要知道哪个模块负责什么操作。Aq您可以看到,我已经为这个示例使用了几个模块。