如何设计点击点击一个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="100%;height:520px; display: none; font-size: 14px; line-height: 30px;">
                                <%@include file="dwbbx-constitution.jsp" %>
                            </div>
                            <div class="emblem" style="100%;height:520px; display: none; font-size: 14px; line-height: 30px;">
                                <%@include file="dwbbx-emblem.jsp" %>
                            </div>
                            <div class="flag" style="100%;height:520px; display: none; font-size: 14px; line-height: 30px;">
                                <%@include file="dwbbx-flag.jsp" %>
                            </div>
                            <div class="rule" style="100%;height:520px; display: none; font-size: 14px; line-height: 30px;">
                                <%@include file="dwbbx-rule.jsp" %>
                            </div>
                        </div>