没性能的啊,就是循环遍历操作DOM
HTML--------code:
<body>
<div class="tab-wrap">
<div class="tab">
<ul class="tab-list">
<li class="tab-item cur">
选项卡1
</li>
<li class="tab-item">
选项卡2
</li>
<li class="tab-item">
选项卡3
</li>
</ul>
</div>
<div class="panel">
<ul class="panel-list">
<li class="panel-item active">1</li>
<li class="panel-item">2</li>
<li class="panel-item">3</li>
</ul>
</div>
</div>
<script type="text/javascript" src="HOME/js/Tab.js"></script>
<script type="text/javascript">
var tabs = new Tabs({
tabItem: 'tab-item',
panelItem: 'panel-item'
});
</script>
</body>
CSS----code:
body {
margin: 0px;
padding: 0px;
}
ul {
padding: 0px;
margin: 0px;
list-style: none;
}
a {
text-decoration: none;
}
.tab-wrap {
width: 500px;
height: 500px;
border: 1px solid #9B410E;
margin: 50px auto;
}
.tab {
width: 500px;
height: 50px;
border-bottom: 1px solid #000000;
}
.tab .tab-list {
display: flex;
flex-direction: row;
text-align: center;
}
.tab-list .tab-item {
width: 100px;
height: 50px;
color: black;
line-height: 50px;
}
.tab-item.cur {
background-color: black;
color: white;
}
.tab-item:hover {
color: white;
background-color: black;
}
.panel {
width: 100%;
height: 450px;
text-align: center;
position: relative;
}
.panel-list .panel-item {
width: 500px;
position: absolute;
text-align: center;
line-height: 450px;
font-size: 65px;
display: none;
}
.panel-item.active {
display: block;
}
javascript----code:
;(function () {
var Tabs = function (opt) {
this.tabs = document.getElementsByClassName(opt.tabItem);
this.panels = document.getElementsByClassName(opt.panelItem);
this.bindClick();
}
Tabs.prototype = {
bindClick: function () {
var tabItems = this.tabs,
panelItems = this.panels;
for (var i = 0; i < tabItems.length; i++) {
(function (j) {
tabItems[j].onclick = function () {
for (var k = 0; k < tabItems.length; k++) {
tabItems[k].className = 'tab-item';
panelItems[k].className = 'panel-item';
}
tabItems[j].className += ' cur';
panelItems[j].className += ' active';
}
}(i));
}
}
}
window.Tabs = Tabs;
}())