tab切换和排他思想

最新推荐文章于 2024-07-25 11:52:08 发布

Mr_liuxiaoyang

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量72

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/Mr_liuxiaoyang/article/details/129940084

版权

先看效果

代码如下

<!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>
        .wrapper{
            width: 400px;
        }
        .contents{
            border:2px solid black
        }
        .contents .content{
            /* 默认全部隐藏 */
            display: none; 
        }
        .tabs{
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="tabs">
            <div class="tab">商品介绍</div>
            <div class="tab">规格包装</div>
            <div class="tab">售后保障</div>
            <div class="tab">预约说明</div>
        </div>
        <div class="contents">
            <div class="content">内容1</div>
            <div class="content">内容2</div>
            <div class="content">内容3</div>
            <div class="content">内容4</div>
        </div>
    </div>
    <script>
        let _tabs=document.querySelectorAll(".tab");
        let _contents=document.querySelectorAll(".content");
        [..._tabs].forEach((_tab,index)=>{
            _tab.onclick=function(){
              //排他思想:每次点击前先去掉所有tab样式，再单独添加当前样式
               for (let tag of _tabs) {
                  tag.style.backgroundColor='';
               }
               for (let tag of _contents) {
                   tag.style.display='none';
               }
            //    for(let i=0;i<_tabs.length;i++){
            //       _tabs[i].style.backgroundColor='';
            //       _contents[i].style.display='none';
            //    }
               this.style.backgroundColor='red';
               _contents[index].style.display='block';
            }
        })
    </script>
</body>
</html>