<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } ul, ol, li { list-style: none; } .container { width: 600px; height: 400px; border: 10px solid #333; margin: 30px auto; display: flex; flex-direction: column; } .container>ul { width: 100%; height: 40px; display: flex; } .container>ul>li { flex: 1; display: flex; justify-content: center; align-items: center; font-size: 30px; color: #fff; background-color: hotpink; } .container>ul>li.active { background-color: orange; } .container>ol { flex: 1; position: relative; } .container>ol>li { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: skyblue; color: #fff; font-size: 100px; display: flex; justify-content: center; align-items: center; display: none; } .container>ol>li.active { display: flex; } </style> </head> <body> <div class="container"> <ul> <li class="active">1</li> <li id="1">2</li> <li id="1">3</li> </ul> <ol> <li class="active">1</li> <li>2</li> <li>3</li> </ol> </div> <script> function Tab(lab){ // 获取页面元素 this.ulLiObj = lab.querySelectorAll('ul > li'); this.olLiObj = lab.querySelectorAll('ol > li'); } Tab.prototype.tab = function () { // 常量定义，用户无法修改 const _this = this; // ulli添加点击事件 this.ulLiObj.forEach((item, index) => { item.addEventListener('click', () => { // 去除其他liclass属性 _this.ulLiObj.forEach((ele, index) => { ele.removeAttribute('class'); // 去除对应olli的class _this.olLiObj[index].removeAttribute('class'); }) // 给自己添加class item.setAttribute('class', 'active'); // 给对应olli添加class _this.olLiObj[index].setAttribute('class', 'active') }) }) } let divObj = document.querySelector('.container'); let tab1 = new Tab(divObj); tab1.tab(); </script> </body> </html>