js 选项卡制作

最新推荐文章于 2023-07-21 22:38:10 发布

码深

最新推荐文章于 2023-07-21 22:38:10 发布

阅读量270

点赞数

分类专栏： js 选项卡制作文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43158701/article/details/106525399

版权

js 选项卡制作专栏收录该内容

1 篇文章 0 订阅

订阅专栏

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #div1 div{
        width: 200px;
        height: 200px;
        background-color: darkgrey;
        display: none;
    }
    .active {
        background-color: yellow;
    }
</style>
<script>
    window.onload = function(){
        var inputs = document.getElementsByTagName('input');
        var div1 = document.getElementById("div1");
        var divs = div1.getElementsByTagName("div");
        for(var i = 0; i < inputs.length;i++){
            inputs[i].index = i;
            inputs[i].onclick = function (){
                for(var i = 0;i < inputs.length;i++){
                    inputs[i].className = '';
                    divs[i].style.display = 'none';
                } 
                this.className = "active";
                divs[this.index].style.display = 'block';
            }
        }
    }
</script>
<body>
    <div id="div1">
        <input type="button" value="教育">
        <input type="button" value="新闻">
        <input type="button" value="资讯">
        <input type="button" value="聊天">
        <div style="display: block;">111</div>
        <div>222</div>
        <div>333</div>
        <div>444</div>

    </div>
    
</body>
</html>

效果图：

码深

关注

0
点赞
踩
0

收藏

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

代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> #di.
复制链接

扫一扫