<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; } .box { border: 1px solid #333; box-sizing: border-box; overflow: hidden; } .box>ul>li { border: 1px solid #333; font-size: 20px; color: black; } .box>ol { border: 1px solid #333; } .box>ol>li { line-height: 260px; text-align: center; font-size: 50px; color: black; } </style> </head> <body> <div class="box"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <ol> <li>1</li> <li>2</li> <li>3</li> </ol> </div> </body> <script type="text/javascript"> class Tabs { constructor(ele, options = {}, callback = () => {}) { if(options === null) { options = {} } //this.ele = document.querySelectorAll(ele); this.ele = document.querySelector(ele); this.btnsBox = this.ele.querySelector("ul"); this.tabsBox = this.ele.querySelector("ol"); this.btns = this.ele.querySelectorAll("ul>li"); this.tabs = this.ele.querySelectorAll("ol>li"); this.default = { tabBoxWidth: options.tabBoxWidth || '600px', tabBoxHeight: options.tabBoxHeight || '300px', tabHeight: options.tabHeight || '40px', currentTabIndex: options.currentTabIndex || 0, tabBtnActiveStyle: options.tabBtnActiveStyle || { backgroundColor: 'skyblue' }, tabBtnUnActiveStyle: options.tabBtnUnActiveStyle || { backgroundColor: "orange" } } this.currentIndex = this.default.currentTabIndex; this.callback = callback; this.initStyle(); this.initEvents(); } initStyle() { // 整个选项卡的宽高 this.ele.style.width = this.default.tabBoxWidth; this.ele.style.height = this.default.tabBoxHeight; // 选项卡按钮宽高和基础样式 this.btnsBox.style.width = this.default.tabBoxWidth; this.btnsBox.style.height = this.default.tabHeight; this.btnsBox.style.display = 'flex'; this.btnsBox.style.justifyContent = 'flex-start'; this.btnsBox.style.alignItems = 'center'; if(this.btns.length) { const btnWidth = parseInt(parseInt(this.btnsBox.style.width) / this.btns.length); this.btns.forEach((item, index) => { item.style.width = btnWidth + 'px'; item.style.height = this.btnsBox.style.height; item.style.lineHeight = this.btnsBox.style.height; item.style.textAlign = 'center'; item.style.cursor = 'pointer'; if(index == this.default.currentTabIndex) { for(let keys in this.default.tabBtnActiveStyle) { item.style[keys] = this.default.tabBtnActiveStyle[keys]; } } else { for(let keys in this.default.tabBtnUnActiveStyle) { item.style[keys] = this.default.tabBtnUnActiveStyle[keys]; } } }); } // 卡片宽高和 基础样式 this.tabsBox.style.width = this.default.tabBoxWidth; this.tabsBox.style.height = ( parseInt(this.default.tabBoxHeight) - parseInt(this.default.tabHeight) ) + 'px'; this.tabsBox.style.position = 'relative'; this.tabs.forEach((item, index) => { item.style.position = 'absolute'; item.style.width = this.tabsBox.style.width; item.style.height = this.tabsBox.style.height; item.style.top = 0; item.style.left = 0; if(index == this.default.currentTabIndex) { item.style.display = 'block'; } else { item.style.display = 'none'; } }); } initEvents() { this.btns.forEach((item, index) => { item.addEventListener('click', () => { this.btns.forEach((k, i) => { for(let keys in this.default.tabBtnUnActiveStyle) { this.btns[i].style[keys] = this.default.tabBtnUnActiveStyle[keys]; } }); this.tabs.forEach((k, i) => { this.tabs[i].style.display = 'none'; }); for(let keys in this.default.tabBtnActiveStyle) { this.btns[index].style[keys] = this.default.tabBtnActiveStyle[keys]; } this.tabs[index].style.display = 'block'; this.currentIndex = index; this.callback(this.currentIndex); }); }); } } let tab = new Tabs(".box", null, function(index) { console.log(index); }); console.log(tab); </script> </html>
