<!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>
