zoukankan      html  css  js  c++  java
  • Example017简单的下拉框

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>简单的下拉框</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            .main {
                 1200px;
                height: 300px;
                margin: 0 auto;
            }
            h3 {
                margin-left: 20px;
                background-color: #888;
            }
            .dis {
                float: left;
            }
            li {
                list-style: none;
                margin-left: 30px;
                margin-top: 10px;
            }
            ul {
                display: none;
                margin-left: 19px;
                background-color: #888;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <div class="dis">
                <h3 onmouseover="one(0)">z选项一</h3>
                <ul>
                    <li>111</li>
                    <li>222</li>
                    <li>333</li>
                    <li>444</li>
                </ul>
            </div>
            <div class="dis">
                <h3 onmouseover="one(1)">z选项二</h3>
                <ul>
                    <li>111</li>
                    <li>222</li>
                    <li>333</li>
                    <li>444</li>
                </ul>
            </div>
            <div class="dis">
                <h3 onmouseover="one(2)">z选项三</h3>
                <ul>
                    <li>111</li>
                    <li>222</li>
                    <li>333</li>
                    <li>444</li>
                </ul>
            </div>
            <div class="dis">
                <h3 onmouseover="one(3)">z选项四</h3>
                <ul>
                    <li>111</li>
                    <li>222</li>
                    <li>333</li>
                    <li>444</li>
                </ul>
            </div>
        </div>
        <script>
            function one(num){
                var objs = document.getElementsByTagName("ul");
                for(var i = 0; i < objs.length;i ++) {
                    if (i == num) {
                        objs[i].style.display = "block";
                    }else {
                        objs[i].style.display = "none";
                    }
                }
            } 
        </script>
    </body>
    </html>
  • 相关阅读:
    项目总结升级2
    项目总结升级1
    项目总结升级
    项目总结4
    项目总结3
    体温填报app2.0开发
    每日博客
    第一周开课博客
    学习日报
    学习日报
  • 原文地址:https://www.cnblogs.com/handsomehan/p/5380551.html
Copyright © 2011-2022 走看看