dojo：根据列表中的选择显示或隐藏div [英] dojo: Show or hide divs based on selection in a list

问题描述

有没有一个简单的方法来完成这个使用dojo（jQuery会更容易我，但我必须使用dojo）：我有一个简单的无序列表。我不希望dojo对列表进行样式（因为我可以使用一些小部件）。当我点击列表中的链接时，我想显示与该链接相关联的div。然后，如果我单击列表中的另一个链接，则显示第一个div隐藏。

 < div id =content> 
< h2>标头< / h2> 
< ul> 
< li>< a href =＃sub_content1>链接1< / a>< / li> 
< li>< a href =＃sub_content2>链接2< / a>< / li> 
< li>< a href =＃sub_content3>链接3< / a>< / li> 
< / ul> 
 
< div id =sub_content1style =display：none;> 
< h3>子内容头1< / h3> 
< p> Lorem ipsum veritas britas conflictum civa< / p> 
< / div> 
 
< div id =sub_content2style =display：none;> 
< h3>子内容头2< / h3> 
< p> Lorem ipsum mobius ceti< / p> 
< / div> 
 
 
< div id =sub_content3style =display：none;> 
< h3>子内容头3< / h3> 
< p> Lorem ipsum柑橘pecto< / p> 
< ul> 
< li>柠檬< / li> 
< li> Limes< / li> 
< / ul> 
< / div> 
 
< / div><！ -  #content的结尾 - > 
  

解决方案

其实你创建自己的tabcontainer？如果你真的想自己做，你应该可能需要这样的东西：

  require（[dojo / ready， dojo / on，dojo / dom-attr，dojo / dom-style，dojo / query，dojo / NodeList-dom），function（ready，on，domAttr，domStyle，query） b $ b ready（function（）{
 query（ul li a）。forEach（function（node）{
 query（domAttr.get（node，href））forEach （节点），
 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 modules）（您应该提供一个类名或像这样的东西，使它更容易）。然后，对于每个链接，将检索与其对应的div并隐藏它，它还将连接一个点击事件处理程序（使用 dojo / on 模块）。

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

我做了一个 JSFiddle 来向你展示。如果仍然不清楚，您应该首先尝试查看Dojo的参考指南真的演示了大多数模块最常见的用法。

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

Is there a simple way to accomplish this using dojo (jQuery would be easier for me but I have to use dojo): I have a simple unordered list. I don't want dojo to style the list (as it might if I used some widget). When I click a link on the list I want to show a div associated with the link. Then if I click another link in the list the first div hides and that one shows.

<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 -->

解决方案

So in fact you're creating your own tabcontainer? If you really want to do it yourself you should probably need something like this:

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");    
                        });
                    }
                });
            });
        });
    });
});

I'm not sure how familiar you are with Dojo, but it uses a query that will loop all links in lists (with the dojo/query and dojo/NodeList-dom modules) (you should provide a classname or something like that to make it easier). Then it will, for each link, retrieve the div corresponding to it and hide it, it will also connect a click event handler to it (with the dojo/on module).

When someone clicks the link, it will (again) loop all the links, but this time it's doing that to determine which node is the target one and which isn't (so it can hide/show the corresponding div).

I made a JSFiddle to show you this. If something is still not clear you should first try to look at the reference guide of Dojo since it really demonstrates the most common uses of most modules.

But since this behavior is quite similar to a TabContainer, I would recommend you to look at the TabContainer reference guide.

这篇关于dojo：根据列表中的选择显示或隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！