Javascript 简单的Tab切换实现

来源：互联网发布：win10办公软件编辑：程序博客网时间：2024/06/05 11:43
代码：
<!DOCTYPE html><html><head>    <title>example</title>    <style type="text/css">    *{        padding: 0;        margin: 0;    }    #example{        width: 500px;        height: 400px;        margin: 0 auto;    }    #example .hd ul li{        display: inline-block;        width: 32%;        height: 36px;        line-height: 36px;        border-radius: 5px;        background-color: #333;        text-align: center;        color: #fff;    }    #example .hd ul li.current{        background-color: green;    }    #example .bd{        border: 1px solid #ccc;        border-radius: 5px;    }    #example .bd ul li{        display: none;    }    #example .bd ul li.current{        display: block;    }    </style></head><body>    <div id="example">        <div class="hd">            <ul>                <li class="current">Beijing</li>                <li>Shanghai</li>                <li>Guangzhou</li>            </ul>        </div>        <div class="bd">            <ul>                <li class="current">This is Beijing!</li>                <li>This is Shanghai</li>                <li>This is Guangzhou</li>            </ul>        </div>    </div>    <script type="text/javascript">    var hd = document.getElementsByClassName("hd")[0].getElementsByTagName("li");    var bd = document.getElementsByClassName("bd")[0].getElementsByTagName("li");    for (var i = 0; i < hd.length; i++) {        hd[i].onclick = function(){            doTabs(this);        }    }    function doTabs(obj){        for (var i = 0; i < hd.length; i++) {            if(hd[i]==obj){                hd[i].className = "current";                bd[i].className = "current";            }else{                hd[i].className = "";                bd[i].className = "";            }        }    }    </script></body></html>
阅读全文
0 0