js 实现简单的选项卡

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
    body,ul{margin:0;padding:0;}
    li{list-style:none;}
    #tab{width:216px;margin:30px auto;}
    #tab ul{width:216px;height:32px;}
    #tab li{float:left;width:60px;height:24px;text-align:center;font-size:14px;line-height:24px;margin-left:10px;border:1px solid #000;background:#CCCCCC}
    #tab .active{background:#FFFF00;}
    #tab div{width:224px;height:200px;background:#CCCCCC;display:none;}
    #tab .show{display:block;}
</style>
<script>
    window.onload =function(){
        var oDiv = document.getElementById('tab');
        var aLi = oDiv.getElementsByTagName('li');
        var aDiv = oDiv.getElementsByTagName('div');
        var lastIndex = 1;
        for(var i=0;i<aLi.length;i++){
            aLi[i].index = i;
            aLi[i].onclick = function(){
                
                /*方法-
                for(var j=0;j<aLi.length;j++){
                    aLi[j].className = '';
                    aDiv[j].style.display = 'none';
                }
                */
                /*方法二*/
                
                aLi[lastIndex].className = '';
                aDiv[lastIndex].style.display = 'none';
                
                this.className  = 'active';
                aDiv[this.index].style.display = 'block';
                lastIndex = this.index;
            };
        }
    };
</script>
</head>

<body>
<div id='tab'>
    <ul>
        <li>port端口</li>
        <li class='active'>静态Mac</li>
        <li>vlan列表</li>
    </ul>

    <div class='hide'>interface gig1/1/1</div>
    <div class='show'>mac 0001.0002.0004</div>
    <div class='hide'>vlan 1 2 3</div>
</div>
</body>
</html>
js 实现简单的选项卡

猜你喜欢
