原生js实现tab选项卡切换

最新推荐文章于 2024-05-17 03:16:20 发布

前端wikc

最新推荐文章于 2024-05-17 03:16:20 发布

阅读量193

点赞数

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/qq_64469057/article/details/128599172

版权

简单粗暴直接上代码：


<!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>tab选项卡</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  .wrap {
    width: 400px;
    height: 230px;
    overflow: hidden;
    margin-left: 537px;
    margin-top: 200px;
  }

  .ulList {
    list-style: none;
    overflow: hidden;
  }

  .ulList li {
    float: left;
    width: 100px;
    height: 30px;
    background-color: grey;
    line-height: 30px;
    text-align: center;
    border-right: 1px solid black;
    box-sizing: border-box;
    font-weight: bold;
  }

  .content {
    width: 400px;
    height: 200px;
    background-color: pink;
    text-align: center;
    line-height: 200px;
    font-size: 50px;
    color: blue;
  }

  .active {
    color: red;
  }
</style>

<body>
  <div class="wrap">
    <ul class="ulList">
      <li class="active">新闻</li>
      <li>电视</li>
      <li>环节</li>
      <li>推荐</li>
    </ul>
    <div class="content">新闻</div>
    <div class="content">电视</div>
    <div class="content">环节</div>
    <div class="content">推荐</div>
  </div>
</body>
<script>
  let liNode = document.querySelectorAll(".ulList > li")
  let divNode = document.querySelectorAll(".content")

  for (let i = 0; i < liNode.length; i++) {
    liNode[i].onclick = function () {
      for (let i = 0; i < liNode.length; i++) {
        liNode[i].style.color = "black"
      }
      for (let i = 0; i < divNode.length; i++) {
        divNode[i].style.display = "none"
      }
      divNode[i].style.display = "block"
      liNode[i].style.color = "red"
    }
  }
</script>

</html>