<!DOCTYPE html>
<html>
<head>
<title>简易选项卡</title>
<style type="text/css">
*{ margin: 0px; padding: 0px; text-align: center; }
ul{ list-style-type: none; }
.bpp5{ left: 468px; top: 60px; position: relative;}
.item{ width: 267px; height: 300px; position: relative; }
.item li{ float: left; height: 40px; padding-left: 20px; padding-right: 20px; line-height: 40px; border: 0.5px solid #333333; cursor: pointer; color: #ffffff; }
.content{ width: 267px; height: 260px; top: 40px; left: 0px; clear: both; position: absolute; z-index: 0; font-size: 200px; line-height: 260px; }
</style>
</head>
<body>
<div class="bpp5">
<ul class="item">
<li>第一课
<div class="content" style="z-index: 2";></div>
</li>
<li>第二课
<div class="content"></div>
</li>
<li>第三课
<div class="content"></div>
</li>
</ul>
</div>
<script type="text/javascript">
// 创建选项卡类
var content_txt = [
{text: '0', color: "orange"},
{text: '1', color: "pink"},
{text: '2', color: "blue"}
];
// 初始值函数
var cleanactive = function(arr){
for(var i = 0; i < arr.length; i++){
arr[i].style.color = "#fff";
arr[i].style.backgroundColor = "#333";
arr[i].children[0].style.zIndex = "0";
}
}
window.onload = function(){
// 获取元素
var items = document.getElementsByClassName("item")[0].getElementsByTagName("li");
// 生成选项卡内容
for(var i = 0; i < items.length; i++){
items[i].style.backgroundColor = "#333";
items[i].children[0].innerHTML = content_txt[i].text;
items[i].children[0].style.backgroundColor = content_txt[i].color;
}
// 遍历点击事件
for(i = 0; i < items.length; i++){
// console.log(items[i].children[0]);
items[i].onclick = function(){
cleanactive(items);
this.style.color = "#333";
this.style.backgroundColor = "#ccc";
this.children[0].style.zIndex = "2";
}
}
}
</script>
</body>
</html>