选项框案例-CSDN博客

本文链接：https://blog.csdn.net/HTML_Z/article/details/123587281

选项框案例

案例视图

在这里插入图片描述

案例用到的知识

获取 DOM 对象
数组的遍历
通过 JS 改变样式
if … else 条件语句

案例代码

<!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;
      }
      .container {
        border: 1px solid #aab0b6;
        width: 400px;
        margin: 20px auto;
      }
      .nav-tabs {
        list-style: none;
      }
      .nav-tabs li {
        float: left;
        width: 100px;
        background: #aab0b6;
        text-align: center;
        line-height: 30px;
        border-right: 1px solid white;
        box-sizing: border-box;
        cursor: pointer;
      }
      .nav-tabs .a {
        background: white;
        color: red;
      }
      .nav-tabs::after {
        content: "";
        display: block;
        clear: both;
      }
      .panel-item {
        height: 50px;
        display: none;
      }
      .active {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <ul class="nav-tabs">
        <li class="tabs-item a">标签一</li>
        <li class="tabs-item">标签二</li>
        <li class="tabs-item">标签三</li>
        <li class="tabs-item">标签四</li>
      </ul>
      <div class="tabs-panel">
        <div class="panel-item active">1</div>
        <div class="panel-item">2</div>
        <div class="panel-item">3</div>
        <div class="panel-item">4</div>
      </div>
    </div>
  </body>
  <script>
    // 获取标签选项卡DOM对象
    var tabItems = document.getElementsByClassName("tabs-item");
    var panelItems = document.getElementsByClassName("panel-item");
    for (var i = 0; i < tabItems.length; i++) {
      // 在事件中无法获取到i值 所以将i值保存给被鼠标进入的对象
      tabItems[i].index = i;
      tabItems[i].onmouseenter = function () {
        // tabItems[i] === this
        // 下标
        var index = this.index;
        for (var i = 0; i < tabItems.length; i++) {
          if (index == i) {
            tabItems[index].style.color = "red";
            tabItems[index].style.background = "white";
            panelItems[index].style.display = "block";
          } else {
            tabItems[i].style.color = "black";
            tabItems[i].style.background = "#aab0b6";
            panelItems[i].style.display = "none";
          }
        }
      };
    }
  </script>
</html>