原生JS实现table选项卡效果 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab选项卡</title>
    <style>
        .active{
            background: yellow;
        }
        #tab_con div{
            width: 200px;
            height: 200px;
            background: #ccc;
            display: none;
        }
    </style>
    <script>
        window.onload = function () {
            var tabNav = document.getElementById('tab_nav');
            var inputs = tabNav.getElementsByTagName('input');

            var divs = document.getElementById('tab_con');
            var o_div =divs.getElementsByTagName('div')
            
           for(var i=0; i< inputs.length; i++){
               inputs[i].index =i; //动态div添加index属性

               inputs[i].onclick= function () {

                   for(var k=0;k< inputs.length; k ++){
                       inputs[k].className='';
                       o_div[k].style.display='none';
                   }

                  this.className='active';
                   o_div[this.index].style.display='block';
               }
           }

        }
    </script>
</head>
<body>
<div id="tab_nav">
    <input type="button" value="教育"/>
    <input type="button"  value="培训"/>
    <input type="button"  value="出国"/>
</div>

<div id="tab_con">
    <div style="display: block" >我是11111111111111111</div>
    <div>我是22222222222222222</div>
    <div >我是33333333333333</div>
</div>


</body>
</html>

　　效果图:

posted @ 2019-11-03 19:44  前端那点事  阅读(638)  评论(0)    收藏  举报