<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tab点击切换</title>
<style type="text/css">
a:hover {
text-decoration:none;
color:#336699;
}
#tab {
/* width:270px; */
padding:5px;
height:150px;
color: #666666;
/* margin:20px; */
}
#tab ul {
padding: 0;
margin: 0;
list-style:none;
text-align: center;
height:46px;
line-height:45px;
border-bottom:1px #EEEEEE solid;
}
#tab ul li {
background-color: #EEEEEE;
width: 100px;
cursor:pointer;
float:left;
list-style:none;
height:44px;
line-height:42px;
padding:0px 10px;
/* margin:0px 10px; */
border:2px solid #EEEEEE;
/* border-bottom:1px solid #EEEEEE; */
}
#tab ul li.on {
/* border-top:1px solid #EEEEEE; */
border-bottom:1px solid #FFF;
}
#tab div {
height:100px;
/* width:250px; */
line-height:24px;
border-top:none;
padding:1px;
/* border:1px solid #336699; */
padding:10px;
}
.hide {
display:none;
}
</style>
<script>
// JS实现选项卡切换
window.onload = function() {
var myTab = document.getElementById("tab");
//整个divvar
myUl = myTab.getElementsByTagName("ul")[0];
//一个节点
var myLi = myUl.getElementsByTagName("li");
//数组var
myDiv = myTab.getElementsByTagName("div");
//数组
for (var i = 0; i < myLi.length; i++) {
myLi[i].index = i;
myLi[i].onclick = function() {
for (var j = 0; j < myLi.length; j++) {
myLi[j].className = "off";
myDiv[j].className = "hide";
myLi[j].style.backgroundColor = '#EEEEEE';
}
this.className = "on";
myDiv[this.index].className = "show";
this.style.backgroundColor = '#FFFFFF';
}
}
}
</script>
</head>
<body>
<div id="tab">
<ul>
<li class="on">课程详情</li>
<li class="off">课程目录</li>
<li class="off">大家评价</li>
</ul>
<div id="firstPage" class="hide">
<a href="#">275万购昌平邻铁三居 总价20万买一居</a><br>
<a href="#">200万内购五环三居 140万安家东三环</a><br>
</div>
<div id="secondPage" class="show">
<a href="#">40平出租屋大改造 美少女的混搭小窝</a><br>
<a href="#">经典清新简欧爱家 90平老房焕发新生</a><br>
</div>
<div id="thirdPage" class="hide">
<a href="#">通州豪华3居260万 二环稀缺2居250w甩</a><br>
<a href="#">西3环通透2居290万 130万2居限量抢购</a><br>
</div>
</div>
</body>
</html>
版权声明：本文为u012114437原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。