其他分享
首页 > 其他分享> > DHTML练习题

DHTML练习题

作者：互联网

1.仿照QQ列表分组

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <link rel="stylesheet" href="css/new_file.css" />
    <!--<script>
        function aa(){
            //将所有div节点中的disp值变为none
            var divDivs = document.getElementsByTagName("div");
            for(var i=0;i<divDivs;i++){
                divDivs[i].style.display = "none";
            }
        }
        aa();
    </script>-->
    <!--
        1.点击分组，展开当前列表
        2.第几分组，在当前分组展开之前，先关闭其他分组
        3.点击分组判断当前分组
        3.1，所示当前分组是展开的，则关闭
        3.2如果当前分组是关闭的，点击后，先关闭其他分组，再展开这个分组
    -->
    <script>
        function openDiv(thisobj){
            var div = thisobj.parentNode.getElementsByTagName("div")[0];
            if(div.style.display=="block"){
                div.style.display = "none";
            }else{
            //将所有div节点中的disp值变为none
                var divDivs = document.getElementsByTagName("div");
                for(var i=0;i<divDivs.length;i++){
                    divDivs[i].style.display = "none";
                }
                //柑橘被点击的分组，获取分组内的div
                var div = thisobj.parentNode.getElementsByTagName("div")[0];
                div.style.display = "block";
            }
        }
        
    </script>
    
    <body>
        <table>
            <tr>
                <td>
                    <a href="#" onclick="openDiv(this)">君王好友</a>
                    <div>
                        秦始皇<br />
                        刘邦<br />
                        李世民<br />
                        康熙<br />
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="#" onclick="openDiv(this)" >aa君王好友</a>
                    <div>
                        秦始皇<br />
                        刘邦<br />
                        李世民<br />
                        康熙<br />
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="#" onclick="openDiv(this)" >君王好友</a>
                    <div>
                        秦始皇<br />
                        刘邦<br />
                        李世民<br />
                        康熙<br />
                    </div>
                </td>
            </tr>
        </table>
    </body>
</html>

 

 

2.二级联动下拉框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <link rel="stylesheet" href="css/new_file.css" />
    
    <script>
        function getContry(){
//            alert("is ok");
            var sel = document.getElementsByTagName("select")[0];
            alert(sel.value);
        }
        
    </script>
    <script>
        var data = {
            "山东省":["济南市","青岛市","菏泽市"],
            "北京市":["济南市","青岛市","菏泽市"],
            "东北市":["济南市","青岛市","菏泽市"]
        }
        function get(thisobj){
            var name = thisobj.value;
            var citys = data[name];
            var ele = document.getElementsByName("country2")[0];
            ele.innerHTML = "<option>--选择城市--</option>";
            for(var i=0;i<citys.length;i++){
                var opt = document.createElement("option")
                opt.innerHTML = citys[i];
                ele.appendChild(opt)
            }
        }
        
    </script>
    
    <body>
        <select id="sel" onchange="getContry()" name="country"> 
            <option value="none">--选择国家--</option>
            <option value="z">中国</option>
            <option value="m">美国</option>
            <option value="r">日本</option>
        </select>
        <br />
        <select id="sel1" onchange="get(this)" name="country1"> 
            <option >--选择省份--</option>
            <option >山东省</option>
            <option >北京市</option>
            <option >东北市</option>
        </select>
        <select id="sel2"  name="country2"> 
            <option>--选择城市--</option>
        </select>
    </body>
</html>

 

标签：练习题,function,thisobj,DHTML,getElementsByTagName,var,div,document
来源： https://www.cnblogs.com/gxlaqj/p/11378934.html