dojo: Show or hide divs based on selection in a list

问题

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

回答1:

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.

来源：https://stackoverflow.com/questions/15906685/dojo-show-or-hide-divs-based-on-selection-in-a-list