【JS】点击改变自己的背景颜色并将自己的文字内容显示在其他盒子内

最新推荐文章于 2023-11-17 15:21:13 发布

蘑菇栗子

最新推荐文章于 2023-11-17 15:21:13 发布

阅读量376

点赞数

分类专栏： js小实例/小功能文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/xxxxxwxx/article/details/126438121

版权

HTML CSS JavaScript 交互效果列表

关键词由CSDN通过智能技术生成

js小实例/小功能专栏收录该内容

60 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

HTML

<div class="box">
      <ul>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
      </ul>
      <ol>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
      </ol>
    </div>

CSS

 * {
        margin: 0;
        padding: 0;
      }

      ul,
      ol,
      li {
        list-style: none;
      }

      .box {
        width: 600px;
        height: 320px;
        border: 3px solid pink;
        margin: 50px auto;
        display: flex;
        flex-direction: column;
      }

      .box > ul {
        height: 60px;
        display: flex;
      }

      .box > ul > li {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        color: #fff;
        background-color: skyblue;
        cursor: pointer;
      }

      .box > ul > li.active {
        background-color: orange;
      }

      .box > ol {
        flex: 1;
        position: relative;
      }

      .box > ol > li {
        width: 100%;
        height: 100%;
        background-color: purple;
        font-size: 100px;
        color: #fff;
        position: absolute;
        left: 0;
        top: 0;
        display: none;
      }

      .box > ol > li.active {
        display: block;
      }
    </style>

JS

let btnObj = document.querySelectorAll("ul>li");
      console.log(btnObj);
      let boxObj = document.querySelectorAll("ol>li");

      for (let i = 0; i < btnObj.length; i++) {
        btnObj[i].onclick = function () {
          for (let j = 0; j < btnObj.length; j++) {
            btnObj[j].className = "";
            boxObj[j].className = "";
          }
          btnObj[i].className = "active";
          boxObj[i].className = "active";
        };
      }