js写一个简单的选项卡

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>js选项卡</title>
    <style>
        #tab{width:300px;
            border:3px solid #CCC;
        }
        #tab h3{margin:0px;
        font-size:14px;
        width:60px;
        height:24px;
        line-height:24px;
        float:left;
        text-align:center;
        background-color:#CCC;
        }
        #tab div{clear:both;
        height:100px;
        font-size:14px;
        padding:20px;
        display:none;}
        #tab .active{background-color:#FFF;}
    </style>
    <script type="text/javascript">
    window.onload=function(){
        var oTab=document.getElementById('tab');
        var aH3=oTab.getElementsByTagName('h3');
        var aDiv=oTab.getElementsByTagName('div');

        for(var i=0;i<aH3.length;i++){  //循环历遍onclick事件
           aH3[i].index=i; //aH3[0].index=0 index是自定义属性
           aH3[i].onclick=function(){
              for(var i=0;i<aH3.length;i++){  //循环历遍去掉h3样式和把div隐藏
                 aH3[i].className='';
                 aDiv[i].style.display='none';
              };
              this.className='active';  //当前按钮添加样式
              aDiv[this.index].style.display='block';  //div显示 this.index是当前div 即div[0]之类的
           };
        };
      };
</script>
</head>
<body>
    <div id="tab">
        <h3>Tab1</h3>
        <h3>Tab2</h3>
        <h3>Tab3</h3>
        <div style="display:block">Tab1</div>
        <div>Tab2</2iv>
        <div>Tab3</div>
    </div>
</body>
</html>

js写一个简单的选项卡

denson

引用和评论

一天一点linux(19):配置https

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具