码迷,mamicode.com
首页 > Web开发 > 详细

js 实现简单的选项卡

时间:2018-05-14 11:43:10      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:cli   tle   round   text   tran   www   http   onclick   char   

<!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 实现简单的选项卡

标签:cli   tle   round   text   tran   www   http   onclick   char   

原文地址:https://www.cnblogs.com/moon-yyl/p/9034988.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!