实现tab栏的切换2

最新推荐文章于 2024-03-27 21:00:11 发布

原创最新推荐文章于 2024-03-27 21:00:11 发布 · 98 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5 #css #前端

js 专栏收录该内容

32 篇文章

订阅专栏

<!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;
    }

    ul {
      list-style: none;
    }

    .wrapper {
      width: 1000px;
      height: 475px;
      margin: 0 auto;
      margin-top: 100px;
    }

    .tab{
      border: 1px solid #ddd;
      /* border-bottom: 0; */
      height: 36px;
      width: 320px;
     
    }

    .tab li {
      float: left;
      
      width: 80px;
      height: 30px;
      margin: 3px 2px;

      line-height: 30px;
      text-align: center;
      cursor: pointer;

      border-right: 1px solid black;
      /* border-top: 1px solid #fff; */
      border-bottom: 2px solid #000;
    }

    .display {
      width: 1002px;
      border: 1px solid black;
      height: 476px;
    }

    .display .main{
        display: none;
    }

    .display .main.active{
        display: block;
    }

    .tab li.active {
      /* border-color: red; */
      border-bottom-color: red;
      /* border-bottom: 0; */
    }

    </style>
</head>
<body>

    <div class="wrapper">
       <!-- tab栏 -->
       <ul class="tab">
           <li class="tab-item active">1</li>
           <li class="tab-item ">2</li>
           <li class="tab-item ">3</li>
       </ul>
       <!-- 展示区域 -->
       <div class="display">
        <div class="main active">1</div>
        <div class="main">2</div>
        <div class="main">3</div>
       </div>
       

    </div>


    <script>
        // 获取对象
         let lis=document.querySelectorAll('.tab .tab-item')
         let divs=document.querySelectorAll('.display .main')

         for (let i = 0; i < lis.length; i++) {

             lis[i].addEventListener('click',function () {

                //  通过querySelector找唯一的元素 
                 document.querySelector('.tab .active').classList.remove('active')
                
                //  this指代lis[i]
                 this.classList.add('active')


                 document.querySelector('.display .active').classList.remove('active')
                 divs[i].classList.add('active')

             })
             
             
         }

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

效果图
在这里插入图片描述