往往最基础的js代码能够学到很多，成才很快的东西，今天就写了个tab选项卡，希望你和同样的我有所收获。
代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/publicClass-1.css"/> </head> <style type="text/css"> .content{ width: 500px; height: 500px; margin: 0 auto; border: 1px solid red; } .content .item-tab button.act{ background-color: yellowgreen; } .tab-content >div{ width: 100%; height: 300px; background-color: #CCCCCC; display: none; } .tab-content >div.act{ display: block; } </style> <body> <div class="content" id="content"> <div class="item-tab" id="item-tab"> <button class="act">选项1</button> <button>选项2</button> <button>选项3</button> </div> <div class="tab-content" id="tab-content"> <div class="item-content act"> 1 </div> <div class="item-content"> 2 </div> <div class="item-content"> 3 </div> </div> </div> <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script type="text/javascript"> var mv = new Vue({ el:‘#content‘, data:{ }, methods:{ } })
//jq
// $(".item-tab button").click(function(){ // var _this=$(this); // var idx=_this.index(); // console.log(idx) // _this.addClass("act").siblings().removeClass(‘act‘); // $(".item-content").eq(idx).addClass(‘act‘).siblings().removeClass(‘act‘); // }); //js 下面用了两种方法，一种是移除 class 一种是设置class
var btnList=document.getElementById(‘item-tab‘).querySelectorAll(‘button‘); var showBox=document.getElementById(‘tab-content‘).querySelectorAll(".item-content"); function tabfn(btn,boxlist){ for (var i=0;i<btn.length;i++) { (function(i){ btn[i].onclick=function(){ for (var j=0;j<btn.length;j++) { btn[j].classList.remove("act"); // boxlist[j].classList.remove("act");//移除方法 boxlist[j].className = "item-content";//设置Class方法 } btn[i].classList.add("act"); // boxlist[i].classList.add("act");//添加方法，对应移除 boxlist[i].className+=" act";//原来基础上添加设置方法 } })(i) } } tabfn(btnList,showBox); </script> </body> </html>
原文：https://www.cnblogs.com/xiaobaicai123/p/10899890.html