<!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>面向對象Tab選項卡</title>
<style>
body,html,ul,li{padding:0px;margin: 0px;}
#tab_header ul{display: flex;width: 100%;}
#tab_header ul li{
flex: 1;
font-style: normal;
list-style-type: none;
justify-content: center;
text-align: center;
align-items: center;
}
ul li.active{color:red}
#tab_content{padding:10px;}
</style>
</head>
<body>
<div id="tab_header">
<ul>
<li id="0" class="active">公告</li>
<li id="1">新聞</li>
<li id="2">論壇</li>
<li id="3">公堂</li>
</ul>
</div>
<div id="tab_content">
<div class="dom" style="display: block;">
這是公告
</div>
<div class="dom" style="display: none;">
這是新聞
</div>
<div class="dom" style="display: none;">
這是論壇
</div>
<div class="dom" style="display: none;">
這是公堂
</div>
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function() {
var tab = new TabsFn(); //頁面加載完成後執行構造函數
tab._inint(); //調用方法
}
function TabsFn() {
this.lis = document.getElementsByTagName("li"); //找到頁面所有的li
this.contents = document.getElementsByClassName("dom"); //找到頁面所有的dom
}
TabsFn.prototype = { //使用prototype原型鏈向對象添加屬性和方法
_inint: function() {
this.setId(); //設置索引方法
this.bindEvent(); //鼠標經過方法
},
//設置索引id
setId: function() {
for (var i = 0; i < this.lis.length; i++) {
this.lis[i].id = i;
}
},
//綁定事件
bindEvent: function() {
var self = this; //備份this
for (var i = 0; i < this.lis.length; i++) { //遍歷li中的個數
this.lis[i].onmouseover = function(e) { //事件
for (var j = 0; j < self.lis.length; j++) { //重置所有的li的active爲空和隱藏所有的要顯示的文本
self.lis[j].className = '';
self.contents[j].style.display = 'none';
}
this.className = 'active'; //啓用當前的active
self.contents[this.id].style.display = 'block' //啓用當前的文本內容顯示
}
}
}
}
</script>
</body>
</html>
運行結果：
