选项卡简单实例

选项卡使我们日常生活中常用到的一个小功能，可以通过JavaScript实现，非常简单，选项卡需要我们注意一下几点，

选项卡用到了循环与自定义索引这两个概念，我们来看代码

<!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>  
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选项卡</title>
<style>
#div1 .active{background:yellow;}
#div1 div{width:200px;height:200px;background:#ccc;border:1px solid #999;display:none;}
</style>
<script>
window.onload=function(){

    //获取最外层的div id
    var oDiv=document.getElementById("div1");
    //通过外层的div id 获取所有的input 标签
    var aBtn=oDiv.getElementsByTagName("input");   // getElementsByTagName 就是获取标签的意思
    var aDiv=oDiv.getElementsByTagName("div");

    for(var i=0;i<aBtn.length;i++){
        aBtn[i].index=i;                        //给input 标签，添加新的index标签并循环赋值
        aBtn[i].onclick=function (){
            for(var i=0;i<aBtn.length;i++){         
                aBtn[i].className='';           //循环清空所有input标签的class 
                aDiv[i].style.display='none';   //循环隐藏所有的div
            }
                this.className='active';        //给当前的input标签添加 active 类样式
                aDiv[this.index].style.display='block';    //当前第 index 标签 的div显示
        }
    }

}
</script>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="111">
<input type="button" value="222">
<input type="button" value="333">
<input type="button" value="444">
<div style="display:block;">111</div>
<div>2222</div>
<div>3333</div>
<div>4444</div>

</div>

</body>
</html>

猜你喜欢