js选项卡的实现方法 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<style>
    .active
    {
        background:#9CC;
    }
    .div2
    {
        width:215px;
        height:200px;
        border:1px #666666 solid;
        display:none;
    }
    input
    {
        width: 50px;
    }
</style>

<div id="div1">
    <input type="button" class="active" value="1"/>
    <input type="button" value="2"/>
    <input type="button" value="3"/>
    <input type="button" value="4"/>

    <div class="div2" style="display:block;">11</div>
    <div class="div2">22</div>
    <div class="div2">33</div>
    <div class="div2">44</div>
</div>

<script>
    window.onload=function(){
        var odiv=document.getElementById('div1');//获取div

        var btn=odiv.getElementsByTagName('input');//获取div下的input
        var div2=odiv.getElementsByTagName('div') ;//获取div下的div

        for(i=0;i<btn.length;i++)//循环每个按钮
        {
            btn[i].index=i;            //btn[i]是指定button的第i个按钮;为该按钮添加一个index属性，并将index的值设置为i
            btn[i].onclick=function()  //按钮的第i个点击事件
            {
                for(i=0;i<btn.length;i++)  //循环去掉button的样式，把div隐藏
                {
                    btn[i].className='';   //清空按钮的样式
                    div2[i].style.display='none';  //隐藏div
                }
                this.className='active';  //自身添加active
                div2[this.index].style.display='block';  //this.index是当前div
            }
        }
    }
</script>


</body>
</html>

 








            

            
posted @ 
2016-06-17 17:54 
清风翠竹茶飘香 
阅读(144) 
评论(0) 
编辑 
收藏 
举报