使用js实现选项卡效果

小灿同学+1

已于 2023-09-05 14:05:50 修改

阅读量190

点赞数 1

文章标签： javascript 前端

于 2023-08-29 19:23:55 首次发布

本文链接：https://blog.csdn.net/xiaocantongxue/article/details/132568512

版权

 <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      ul {
        display: none;
      }
      .active {
        color: black;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <button>娱乐</button>
      <button>体育</button>
      <button>历史</button>
    </div>
    <div>
      <ul>
        <li>娱乐新闻</li>
        <li>娱乐新闻</li>
        <li>娱乐新闻</li>
      </ul>
      <ul>
        <li>体育新闻</li>
        <li>体育新闻</li>
        <li>体育新闻</li>
      </ul>
      <ul>
        <li>历史新闻</li>
        <li>历史新闻</li>
        <li>历史新闻</li>
      </ul>
    </div>

    <script>
      // 1.获取所有的点击按钮
      var btnArr = document.querySelectorAll('.box button');
      console.log(btnArr);
      btnArr.forEach(function (btn, i) {
        //2.给每个按钮添加点击事件
        btn.onclick = function () {
          console.log(btn, i);
          btnArr.forEach(function (btn) {
            //3.先清除点击按钮的类名
            btn.className = '';
          });
          //4.给点击按钮添加一个类名,在点击按钮之后,实现背景颜色的效果
          btn.className = 'active';

          //5.获取所有的ul
          var ulArr = document.querySelectorAll('ul');
          console.log(ulArr[i]);
          ulArr.forEach(function (v) {
            //6.让所有的ul消失
            v.style.display = 'none';
          });
          //7.点击按钮的时候,根据点击按钮对应的下标显示对应的ul
          ulArr[i].style.display = 'block';
        };
      });
    </script>
  </body>