js学习案例———tab栏切换

最新推荐文章于 2023-03-28 19:23:04 发布

动物世界647

最新推荐文章于 2023-03-28 19:23:04 发布

阅读量143

点赞数

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/weixin_63186246/article/details/128635513

版权

项目代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .tab{
            margin: 30px auto;
            width: 300px;
            height: 200px;
            /*background: red;*/
        }
        .tab .tab_up{
            display: flex;
        }
        .tab .tab_up li{
            height: 30px;
            width: 50px;
            border: 1px solid;
        }
        .tab .tab_up .col{
            background: red;
            color: white;
        }
        .tab .tab_down{
            height: 90px;
            width: 154px;
            /*background-color: pink;*/
            border: 1px solid #333;
            border-top: none;
        }
        .tab .tab_down .name{
            height: 30px;
            width: 50px;
            display: none;
        }
        .tab .tab_down .year{
            display: block;
        }
    </style>
</head>
<body>
    <div class="tab">
            <ul class="tab_up">
                <li class="col">年</li>
                <li>月</li>
                <li>日</li>
            </ul>
        <div class="tab_down">
            <div class="name year">2023</div>
            <div class="name">1</div>
            <div class="name">10</div>
        </div>
    </div>
    <script>
        //获取元素
        let tab_up =document.querySelector('.tab_up');
        let lis=tab_up.querySelectorAll('li');
        let names=document.querySelectorAll('.name');
        //for绑定点击事件
        for(var i=0;i<lis.length;i++){
            //创建自有的元素index
            lis[i].setAttribute('index',i);
            lis[i].onclick=function(){
                //去除class
                for(var i=0;i<lis.length;i++){
                    lis[i].className='';
                }
                //给点击的添加class
                this.className='col';
                //获取index元素
                var index=this.getAttribute('index');
                //检查有没有获取到index
                //console.log(index);
                //去除其他的
                for(var i=0;i<names.length;i++){
                    names[i].style.display='none';
                }
                //显示当前点击的介绍
                names[index].style.display='block';
            }
        }
    </script>
</body>
</html>