js选项卡简单切换

最新推荐文章于 2024-05-29 18:02:20 发布

lhq5189935

最新推荐文章于 2024-05-29 18:02:20 发布

阅读量329

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/lhq5189935/article/details/44838033

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #div1 .active{background: yellow;}
            #div1 div{width:200px; height: 200px; background: #CCC; border: 1px solid #66ff00;display: none;}
        </style>
        <script>
window.onload = function()
{
    var oDiv=document.getElementById('div1');
    var aBtn = oDiv.getElementsByTagName('input');
    var aDiv = oDiv.getElementsByTagName('div');
    for(var i =0;i<aBtn.length;i++)
    {
        aBtn[i].index =i;
        aBtn[i].onclick = function()
        {
            for(var i=0;i<aBtn.length;i++){
            aBtn[i].className='';
            aDiv[i].style.display='none';
            }
          this.className = 'active';  
          aDiv[this.index].style.display='block';
        };
    }
};
        </script>
    </head>
    <body>
        <div id="div1">
            <input type="button" class="active" value="教育"/>
            <input type="button"  value="招生"/>
            <input type="button"  value="培训"/>
            <input type="button"  value="人文"/>
            <div style="display: block" >11111</div>
            <div>22222</div>
            <div>33333</div>
            <div>4444</div>
        </div>
    </body>
</html>

lhq5189935

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js选项卡简单切换

TODO supply a title #div1 .active{background: yellow;} #div1 div{width:200px; height: 200px; background: #CCC; border: 1px solid #66ff00;display: non
复制链接

扫一扫