js 原生手写tabs标签页

最新推荐文章于 2024-03-04 00:09:38 发布

前端61

最新推荐文章于 2024-03-04 00:09:38 发布

阅读量2.1k

点赞数 2

分类专栏： js基础文章标签： javascript js tabs

本文链接：https://blog.csdn.net/qq_43327305/article/details/90402144

版权

js基础专栏收录该内容

9 篇文章 0 订阅

订阅专栏

js 原生手写tabs标签页

效果：

在这里插入图片描述

代码：

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container{
            width:400px;
            height:400px;
            margin: 100px auto;
            border:1px solid red;
        }
        #a{
            width:100%;
            height:60px;
            display: flex;
        }
        #a div{
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            border:1px solid red;
        }
        .content{
            width:100%;
            height:340px;
            background-color: rgba(16, 25, 122, 0.6);
            display: none;
        }
        .container .active{
            display: block;
        }
    </style>
</head>
<body>
    
    <div class="container">
        <div id="a">
            <div>111</div>
            <div>222</div>
            <div>333</div>
            <div>444</div>
        </div>
        <div class="content active">111</div>
        <div class="content">222</div>
        <div class="content">333</div>
        <div class="content">444</div>
    </div>

    <script>

        var a = document.getElementById('a');
        var divObj = a.children
        var content = document.getElementsByClassName('content')
        for(var i = 0; i < divObj.length; i++){
            divObj[0].style.backgroundColor = 'red'
            divObj[i].setAttribute('index',i) //设置自定义属性
            divObj[i].onclick = function(){
                for(var j = 0; j < divObj.length; j++){
                    divObj[j].style.backgroundColor = '#fff'
                    content[j].classList.remove('active') //移除class
                }
                this.style.backgroundColor = "red"
                content[this.getAttribute('index')].classList.add('active') //添加class
            }
        }



    </script>
</body>
</html>

前端进阶精选：点此去

前端61

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
3
评论
js 原生手写tabs标签页

js 原生手写tabs标签页效果：代码： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .container{ ...
复制链接

扫一扫