前端开发页面 简单的纯js的tab切换

前端开发技术面试一般多久|前端开发需要找我的技能|武汉天喻软件前端开发

html 代码

<!DOCTYPE html>
<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”>
<head>
    <meta charset=”utf-8″ />
    <title>web前端集成开发工具</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .tab ul {
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        .tab ul li {
            float: left;
            list-style: none;
            width: 50%;
            background: #eee;
            cursor: pointer;
        }
        .tab ul li.on {
            background: #fff;
        }
        .tabList {
            text-align: center;
            line-height: 100px;
        }
    </style>
    <script type=”text/javascript”>
        function setTab(name, m, n) {
            for (var i = 1; i <= n; i++) {
                var menu = document.getElementById(name + i);
                var showDiv = document.getElementById(“cont_” + name + “_” + i);
                menu.className = i == m ? “on” : “”;
                showDiv.style.display = i == m ? “block” : “none”;
            }
        }
    </script>
</head>
<body>
    <div>
        <div class=”tab”>
            <ul>
                <li id=”tow1″ class=”on” onclick=’setTab(“tow”,1,2)’>
                    <div>TAB一</div>
                </li>
                <li id=”tow2″ onclick=’setTab(“tow”,2,2)’>
                    <div>TAB二</div>
                </li>
            </ul>
        </div>
    </div>
    <div class=”tabList”>
        <div id=”cont_tow_1″>
            TAB一内容
        </div>
        <div id=”cont_tow_2″ style=”display:none;”>
            TAB二内容
        </div>
    </div>
</body>
</html>

腾讯面试前端开发|怎么能看到开发前端页面的代码|前端页面快速开发

» 本文来自:前端开发者 » 《前端开发页面 简单的纯js的tab切换》
» 本文链接地址:https://www.rokub.com/4479.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!