html部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab选项卡切换</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="tab">
<!--头部内容-->
<div id="tab_header">
<ul>
<li class="selected">公告</li>
<li>规则</li>
<li>论坛</li>
<li>安全</li>
<li>公益</li>
</ul>
</div>
<!--尾部内容-->
<div id="tab_content">
<div class="dom" style="display:block">
<ul>
<li><a href="#">公告1</a></li>
<li><a href="#">公告2</a></li>
<li><a href="#">公告3</a></li>
<li><a href="#">公告4</a></li>
</ul>
</div>
<div class="dom">
<ul>
<li><a href="#">规则1</a></li>
<li><a href="#">规则2</a></li>
<li><a href="#">规则3</a></li>
<li><a href="#">规则4</a></li>
</ul>
</div>
<div class="dom">
<ul>
<li><a href="#">论坛1</a></li>
<li><a href="#">论坛2</a></li>
<li><a href="#">论坛3</a></li>
<li><a href="#">论坛4</a></li>
</ul>
</div>
<div class="dom">
<ul>
<li><a href="#">安全1</a></li>
<li><a href="#">安全2</a></li>
<li><a href="#">安全3</a></li>
<li><a href="#">安全4</a></li>
</ul>
</div>
<div class="dom">
<ul>
<li><a href="#">公益1</a></li>
<li><a href="#">公益2</a></li>
<li><a href="#">公益3</a></li>
<li><a href="#">公益4</a></li>
</ul>
</div>
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>
css部分:
*{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
color: #000;
}
#tab{
width: 498px;
height: 120px;
border: 1px solid #ccc;
margin: 100px auto;/*让盒子到中间来*/
/* overflow: hidden;*//*超出部分全部隐藏*/
}
#tab_header{
background-color: #e8e8e8;
height: 28px;
line-height: 28px;
}
#tab_header ul{
width: 500px;
cursor: pointer;
}
#tab_header ul li{
float: left;
width: 98px;
text-align: center;
padding: 0 1px;
border-bottom: 1px solid #ccc;
}
#tab_header ul li.selected{
background-color: #fff;
border-bottom: none;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 0;
}
#tab_header ul li:nth-child(1){
border-left: none;
}
#tab_header ul li:nth-last-child{
border-right: none;
}
#tab_header ul li:hover{
font-weight: bolder;
color: orangered;
}
/*内容区域*/
#tab_content{
}
#tab_content .dom{
padding-top: 20px;
display: none;
}
#tab_content .dom ul li{
float: left;
width: 220px;
text-align: center;
margin: 5px;
}
#tab_content .dom ul li a:hover{
color: orangered;
}
js部分:
window.onload = function () {
//1.获取标签
var allLi=$('tab_header').getElementsByTagName("li");
var alldom=$('tab_content').getElementsByClassName("dom");
//2.遍历监听鼠标的进入
for(var i=0;i<allLi.length;i++){
var li=allLi[i];
li.index=i;//处理同步和异步
//2.1判断进到里面需要做什么事情
li.onmouseover = function () {
for( var j=0;j<allLi.length;j++){
allLi[j].className=" ";
}//首先要让全部不被选中,然后再让当前的li被选中
this.className="selected";
for(var j=0;j<alldom.length;j++){
alldom[j].style.display="none";
}
alldom[this.index].style.display="block";
}
}
};
function $(id) {
return typeof id==="string"?document.getElementById(id):null;
}