【JavaScript】实现网页中的选项卡

最新推荐文章于 2024-01-24 12:19:34 发布

会举重的薯片

最新推荐文章于 2024-01-24 12:19:34 发布

阅读量705

点赞数 1

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_55930097/article/details/131860006

版权

一、简易选项卡

以下是实现一个简单选项卡的代码。代码中有注释。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>实现简易选项卡</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul {
        /* 布局方式变为弹性盒模型 */
        display: flex;
        list-style: none;
      }
      li {
        height: 50px;
        line-height: 50px;
        text-align: center;
        flex: 1;
      }
      .active {
        color: red;
        /* 设置底部边框 */
        border-bottom: 1px solid red;
      }
    </style>
  </head>
  <body>
    <ul>
      <!-- 选项卡1一开始就有下划线 -->
      <li class="active" id="item1">1</li>
      <li id="item2">2</li>
    </ul>
    <script>
      // 点击第一个选项卡时，将点击效果添加到自身，并从第二个选项卡中删除点击效果
      item1.onclick = function () {
        item1.classList.add("active");
        item2.classList.remove("active");
      };
      // 点击第二个选项卡时，将点击效果添加到自身，并从第一个选项卡中删除点击效果
      item2.onclick = function () {
        item1.classList.remove("active");
        item2.classList.add("active");
      };
    </script>
  </body>
</html>

运行代码，点击第一个选项卡
在这里插入图片描述
点击第二个选项卡

二、完整选项卡

以下是实现一个完整选项卡的代码。代码中有注释。总体而言，此代码允许选项卡式导航，单击选项卡将激活它并显示其相应的内容。先前处于活动状态的选项卡和内容将被停用。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>选项卡</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul {
        list-style: none;
      }
      .header {
        display: flex;
        width: 500px;
      }
      .header li {
        flex: 1;
        height: 50px;
        line-height: 50px;
        /* 垂直居中 */
        text-align: center;
        /* 边框 */
        border: 1px solid black;
      }
      .box {
        position: relative;
      }
      .box li {
        position: absolute;
        left: 0;
        top: 0;
        width: 500px;
        height: 200px;
        background-color: yellow;
        display: none;
      }
      .header .active {
        background-color: red;
      }
      .box .active {
        display: block;
      }
    </style>
  </head>
  <body>
    <ul class="header">
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <ul class="box">
      <li class="active">aaa</li>
      <li>bbb</li>
      <li>ccc</li>
      <li>ddd</li>
    </ul>
    <script>
      var oHeaderItems = document.querySelectorAll(".header li");
      var oBoxItems = document.querySelectorAll(".box li");
      for (var i = 0; i < oHeaderItems.length; i++) {
        // i循环一次就结束了，因此要构建自定义属性，跟踪所单击项目的索引
        oHeaderItems[i].dataset.index = i;
        // 定义一个名为handler的 onclick 事件处理程序函数
        oHeaderItems[i].onclick = handler;
      }
      function handler() {
        //this表示当前点击的这一个项目，该索引用于标识 oHeaderItems 和 oBoxItems 中的相应项。
        var index = this.dataset.index;
        // for 循环用于从 oHeaderItems 和 oBoxItems 中的所有项中的active
        for (var m = 0; m < oHeaderItems.length; m++) {
          oHeaderItems[m].classList.remove("active");
          oBoxItems[m].classList.remove("active");
        }
        //给当前选中的选项卡加上active
        oHeaderItems[index].classList.add("active");
        oBoxItems[index].classList.add("active");
      }
    </script>
  </body>
</html>

保存后，打开页面
在这里插入图片描述
点击选项2

会举重的薯片

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JavaScript】实现网页中的选项卡

总体而言，此代码允许选项卡式导航，单击选项卡将激活它并显示其相应的内容。//this表示当前点击的这一个项目，该索引用于标识 oHeaderItems 和 oBoxItems 中的相应项。// for 循环用于从 oHeaderItems 和 oBoxItems 中的所有项中的active。// 点击第一个选项卡时，将点击效果添加到自身，并从第二个选项卡中删除点击效果。// 点击第二个选项卡时，将点击效果添加到自身，并从第一个选项卡中删除点击效果。//给当前选中的选项卡加上active。
复制链接

扫一扫