原生JS实现tab切换

来源：互联网发布：linux没有中文输入法编辑：程序博客网时间：2024/06/08 03:56

今天刚好写了一个简单的tab切换代码，样式有点丑….不过自己做个总结。

tab切换效果图

//html<body><div id="wrap">    <ul id="nav">        <li class="active"><a href="javasript:;">区域前端组</a></li>        <li><a href="javasript:;">区域开发组</a></li>        <li><a href="javasript:;">区域服务组</a></li>    </ul></div><div id="tab-content">    <div class="active"></div>    <div></div>    <div></div></div></body>

//css<style type="text/css">    #wrap {        padding: 0;        margin: 0;        float: left;        width: 120px;    }    #wrap ul {        float: left;        padding: 0;        margin: 0;        overflow: hidden;    }    #wrap li {        padding: 0;        list-style: none;    }    #wrap li a {        display: block;        padding: 5px 20px;        font-size: 16px;        text-decoration: none;        color: #333;    }    #wrap li:hover {        background: #ccc;    }    #tab-content {        float: left;    }    .active {        background: #ccc;    }    #tab-content div {        height: 84px;        display: none;    }    #tab-content div.active {        display: block;        background: #ccc;    }</style>

//js<script type="text/javascript">//模拟的数据var data = [    {        name: "区域前端组",        member: [            {                name: "zy1",                jobNum: 123            },            {                name: "hl1",                jobNum: 124            },            {                name: "zs1",                jobNum: 125            }        ]           },    {        name: "区域开发组",        member: [            {                name: "zy2",                jobNum: 223            },            {                name: "hl2",                jobNum: 224            },            {                name: "zs2",                jobNum: 225            }        ]           },    {        name: "区域服务组",        member: [            {                name: "zy3",                jobNum: 323            },            {                name: "hl3",                jobNum: 324            },            {                name: "zs3",                jobNum: 325            }        ]           }];var tabs = document.getElementById("nav").getElementsByTagName("li");var conts = document.getElementById("tab-content").getElementsByTagName("div");for(var  i = 0, len = tabs.length; i < len; i++) {    tabs[i].onclick = function() { tabchange(this);}    // tabs[i].onmouseover = function() { tabchange(this);}}// tab切换 获取当前的index值，然后对应到要显示的内容上，function tabchange(tab) {    var index = 0,        cont = null,        _data = null,        html = "";    for (var i = 0, len = tabs.length; i < len; i++) {        tabs[i].className = ""; //清除所有li的active属性        conts[i].className = ""; //清除所有#tab-content下div的active属性        if (tabs[i] === tab) {            index = i; //获取当前的index值        }    }    cont = conts[index]; //当前应显示的区域    tab.className = "active";    cont.className = "active";    _data = data[index];//当前要显示的数据    var members = _data.member,        mLen = _data.member.length;    for(var j = 0; j < mLen; j++) {        html += "姓名：" + members[j].name + ",  工号：" + members[j].jobNum +" / ";    }    cont.innerHTML = html;}</script>

0 0