<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.tab {
600px;
margin: 20px auto;
font-family: "微软雅黑";
color: #657180;
}
.tab-title,
.tab-content {
list-style: none;
margin: 0;
padding: 0;
}
.tab-content {
border: 1px solid #d7dde4;
}
.clear::after {
clear: both;
content: "";
display: block;
}
.tab-title li {
float: left;
text-align: center;
padding: 5px 16px 4px;
margin-right: 6px;
background-color: #f5f7f9;
border: 1px solid #d7dde4;
border-bottom: none;
cursor: pointer;
position: relative;
font-size: 14px;
}
.tab-title li:hover {
color: #39f;
}
.tab-title li.active {
background-color: #FFF;
}
.tab-title li.active::after {
content: "";
border-bottom: 1px solid #FFFFFF;
position: absolute;
100%;
bottom: -1px;
left: 0;
}
.tab-content li {
display: none;
578px;
height: 300px;
background-color: #FFF;
padding: 10px;
font-size: 12px;
}
.tab-content li:first-child {
display: block;
}
</style>
</head>
<body>
<!--选项卡-->
<div class="tab" id="tab1">
<ul class="tab-title clear">
<li class="active">详情</li>
<li>评价</li>
<li>活动</li>
<li>投票</li>
<li>视频</li>
</ul>
<ul class="tab-content">
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
</div>
</body>
<script type="text/javascript">
window.onload = function() {
var oWrap = document.getElementById("tab1");
var oTitle = oWrap.querySelectorAll(".tab-title li");
var oContent = oWrap.querySelectorAll(".tab-content li");
//绑定事件
for (var i = 0; i < oTitle.length; i++) {
//存下标
oTitle[i].index = i;
// oTitle[i].title = i;
oTitle[i].onclick = function() {
//移除所有的active
for (var i = 0; i < oTitle.length; i++) {
oTitle[i].className = "";
}
this.className = "active";
//隐藏所有的content
for (var i = 0; i < oContent.length; i++) {
oContent[i].style.display = "none";
}
oContent[this.index].style.display = "block";
}
}
}
</script>
</html>