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

사실 자신 만의 탭 컨테이너를 만들고 있습니까? 당신이 정말로 그것을 스스로하고 싶은 경우에 당신은 아마 같은 것을 필요로한다 :

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을 살펴 보시기 바랍니다.