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

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>

JS

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 = "";}this.className = "active-btn";div[this.index].className = "active-content";num = this.index;};}// 自动轮播setInterval(function () {num++;num %= 3;for (var i = 0; i < btn.length; i++) {btn[i].className = "";div[i].className = "";}btn[num].className = "active-btn";div[num].className = "active-content";}, 1000);