找回密码
当前位置：前端开发者 > JavaScript > 正文

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

2018-07-12 分类：JavaScript 阅读(655) 评论(0)

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

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>

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

赞(0)
前端开发者 » 前端开发页面 简单的纯js的tab切换
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论