js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style>
    #Eroup{display:none;}
    #Aria{display:none;}
    #Eoop{display:none;}
</style>

</head>

<body>
    <input type="checkbox" name="Eroup" onclick="show(this)" />Eroup
    <input type="checkbox" name="Aria" onclick="show(this)" />Aria
    <input type="checkbox" name="Eoop" onclick="show(this)" />Eoop
    <div id="content">
        <div id="Eroup">
            <script>
                var Eroup=['A','B','C','D'];
                for(var i=0;i<Eroup.length;i++){
                    document.write('<input type="checkbox" />'+Eroup[i]);
                }
            </script>
        </div>
        <div id="Aria">
            <script>
                var Aria=['E','F','G','H'];
                for(var i=0;i<Aria.length;i++){
                    document.write('<input type="checkbox" />'+Aria[i]);
                }
            </script>
        </div>
        <div id="Eoop">
               <script>
                var Eoop=['I','J','K','L'];
                for(var i=0;i<Eoop.length;i++){
                    document.write('<input type="checkbox" />'+Eoop[i]);
                }
            </script>
        </div>
    </div>
    <script>
        var cdivs=document.getElementById("content").getElementsByTagName("div");
        function show(obj){
                switch(obj.name){
                        case "Eroup":
                            cdivs[0].style.display="block";
                            cdivs[1].style.display="none";
                            cdivs[2].style.display="none";
                            break;
                        case "Aria":
                            cdivs[1].style.display="block";
                            cdivs[0].style.display="none";
                            cdivs[2].style.display="none";
                            break;
                        case "Eoop":
                            cdivs[2].style.display="block";
                            cdivs[0].style.display="none";
                            cdivs[1].style.display="none";
                            break;
                    }
            }
    </script>
</body>
</html>

 

posted @ 2015-12-19 07:37  对数螺旋线  阅读(325)  评论(0编辑  收藏  举报