选项卡

最新推荐文章于 2024-05-06 21:05:10 发布

Alex十年

最新推荐文章于 2024-05-06 21:05:10 发布

阅读量205

点赞数

分类专栏： JavaScript知识总结

本文链接：https://blog.csdn.net/ilikejj0/article/details/79513568

版权

JavaScript知识总结专栏收录该内容

22 篇文章 0 订阅

订阅专栏

思路：
1、使用getElementsByTagName来选择所有的按钮
2、使用for循环来获取每一个，给每一个按钮来加事件
3、使用for循环把之前每个按钮点击时的背景颜色清空
4、使用this来使当前的按钮加入一个class，使背景颜色改变
5、对于下面的div框也跟着改变，所以在2步时，给每个按钮设置一个index,
6、那一个按钮被点击，哪一个的div的display为block

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>选项卡</title>
        <style>
            #div2 div{width: 200px;height: 200px;border: 1px solid #BC8F8F;background-color: #BC8F8F;display: none;}
            #div1 .active{background-color: yellow;}                
        </style>
        <script>
            window.onload=function(){
                var oDiv1=document.getElementById('div1');
                var oBtn = oDiv1.getElementsByTagName('input');
                var oDiv = document.getElementById('div2');
                var oDiv2 = oDiv.getElementsByTagName('div');
                for(var i=0;i<oBtn.length;i++){
                    oBtn[i].index = i;
                    oBtn[i].onclick=function(){
                        for(var i=0;i<oBtn.length;i++){                         
                            oBtn[i].className='';
                            oDiv2[i].style.display='none';
                        }                   
                        this.className='active';
                        oDiv2[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>
        <div id='div2'>
            <div style="display: block;">1111</div>
            <div>2222</div>
            <div>3333</div>
            <div>4444</div>
        </div>
    </body>
</html>

Alex十年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选项卡

思路： 1、使用getElementsByTagName来选择所有的按钮 2、使用for循环来获取每一个，给每一个按钮来加事件 3、使用for循环把之前每个按钮点击时的背景颜色清空 4、使用this来使当前的按钮加入一个class，使背景颜色改变 5、对于下面的div框也跟着改变，所以在2步时，给每个按钮设置一个index, 6、那一个按钮被点击，哪一个的div的display为blo...
复制链接

扫一扫