어떻게div를 클릭하면 다른div가 대응하는 반응을 하고 노드 아래의 하위 노드를 획득할 수 있는지 설계합니까

<div id="show">
     <div>1</div>
     <div>2</div>
     <div>3</div>
     </div>
 
    <div id="click">
    <div>click1</div>
    <div>click2</div>
    <div>click3</div>
    </div>
 
  ：1，  click1，show    1（2，3  ）
           2，    ,click1     
           3，    click，    

<script type="text/javascript">

window.onload = function() {

    var click_divs = document.getElementById("click")

        .getElementsByTagName("div");

    var show_divs = document.getElementById("show")

        .getElementsByTagName("div");

    for(var i = 0; i < click_divs.length; i++) {

        !function(a) {

            //    #click div

            click_divs[a].onclick = function() {

                // #show div     

                for(var x = 0; x < show_divs.length; x++) {

                    show_divs[x].style.display = "none";

                }

                //    #show div   

                show_divs[a].style.display = "block";

 

                // #click div     

                for(var y = 0; y < show_divs.length; y++) {

                    click_divs[y].style.fontWeight = "Normal";

                }

                //    #click div     

                click_divs[a].style.fontWeight = "Bold";

            };

        }(i);

    }

};

</script>

/*       div   */

    var show_divs;

    /*  id="show-divs" div   ，（    IE      ，         ！            div    ）*/

    function del_ff(show){

        var show_div = show.childNodes;

        for(var i=0; i<show_div.length;i++){

            if(show_div[i].nodeName == "#text" && !/\s/.test(show_div.nodeValue)){

                show.removeChild(show_div[i]);

            }

        }

        show_divs=show_div;

    }

<div id="show-divs" class="c-right-c-conter">

                            <div class="oath" style="display: block;text-align:center;">

                                <img alt="loading" src="/images/zhdj/dwbbx-join_party_oath.jpg" />

                            </div>

                            <div class="constitution" style="width:100%;height:520px; display: none; font-size: 14px; line-height: 30px;">

                                <%@include file="dwbbx-constitution.jsp" %>

                            </div>

                            <div class="emblem" style="width:100%;height:520px; display: none; font-size: 14px; line-height: 30px;">

                                <%@include file="dwbbx-emblem.jsp" %>

                            </div>

                            <div class="flag" style="width:100%;height:520px; display: none; font-size: 14px; line-height: 30px;">

                                <%@include file="dwbbx-flag.jsp" %>

                            </div>

                            <div class="rule" style="width:100%;height:520px; display: none; font-size: 14px; line-height: 30px;">

                                <%@include file="dwbbx-rule.jsp" %>

                            </div>

                        </div>