原生JS 选项卡轮播（简版）

吖吖982

已于 2022-08-30 16:04:55 修改

阅读量377

点赞数

文章标签： javascript 前端 html

于 2022-08-30 15:58:21 首次发布

本文链接：https://blog.csdn.net/weixin_67268153/article/details/126605923

版权

本文介绍了如何使用原生JavaScript实现简单的选项卡轮播效果，包括CSS样式设置和HTML结构布局，以及核心的JavaScript逻辑实现。

摘要由CSDN通过智能技术生成

css 样式

 .active-btn{
      background-color: pink;
    }
    div{
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      display: none;
    }
    .active-content{
      display: block;
    }

html 结构

 <button class="active-btn">按钮一</button>
  <button>按钮二</button>
  <button>按钮三</button>
  <div class="active-content"> 内容一</div>
  <div>内容二</div>
  <div>内容三</div>

  var btn = document.querySelectorAll("button");
    var div = document.querySelectorAll("div");
    var num = 0;
    for (var i = 0; i < btn.length; i++) {
      btn[i].index = i;
      div[i].onclick = function () {
        for (var i = 0; i < btn.length; i++) {
          btn[i].className = "";
          div[i].className &