HTML5+CSS3+JS 選項卡切換
先上效果圖：
1、html頁面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tab切換</title>
<link rel="stylesheet" href="css/tabswitchover.css" />
<script type="text/javascript" src="js/tabswitchover.js" ></script>
</head>
<body>
<div class="tab" id="tab">
<div id="tab_title" class="tab_title">
<ul>
<li class="selector"><a href="#">公告</a></li>
<li><a href="#">規則</a></li>
<li><a href="#">論壇</a></li>
<li><a href="#">安全</a></li>
<li><a href="#">公益</a></li>
</ul>
</div>
<div class="tab_content" id="tab_content">
<div class="tabct" 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="tabct" style="display: none;">
<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="tabct" style="display: none;">
<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="tabct" style="display: none;">
<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="tabct" style="display: none;">
<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>
</body>
</html>
2、css ——tabswitchover
*{
margin: 0;
padding: 0;
list-style: none;
font-size: 12px;
}
.tab{
width: 298px;
height: 98px;
border: 1px solid #eee;
margin: 10px;
overflow: hidden;
}
.tab_title{
height: 27px;
position: relative;
background: #f7f7f7;
}
.tab_title ul{
width: 301px;
position: absolute;
left: -1;
}
.tab_title li{
float: left;
width: 58px;
height: 26px;
line-height: 26px;
text-align: center;
padding: 0 1px;
border-bottom: 1px solid #eee;
overflow: hidden;
}
.tab li a:link,.tab li a:visited{
text-decoration: none;
color: #000;
}
.tab li a:hover{
color: #f90;
font-weight: 700; /*字型變粗*/
}
.tab_title li.selector{
background: #fff;
border-bottom-color: #fff;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
padding: 0;
}
.tab .tab_content .tabct {
margin: 10px 10px 10px 19px;
}
.tab .tab_content .tabct ul li{
float: left;
width: 134px;
height: 25px;
overflow: hidden;
}
3、js——tabswitchover
function $(id) {
return typeof id == "string"?document.getElementById(id):id;
}
window.onload = function() {
var titleName = $("tab_title").getElementsByTagName("li");
var tabContent = $("tab_content").getElementsByTagName("div");
if(titleName.length != tabContent.length){
return;
}
for(var i = 0; i < titleName.length; i++) {
titleName[i].id = i;
titleName[i].onmouseover = function() {
for(var j = 0; j < titleName.length; j++){
titleName[j].className = "";
tabContent[j].style.display = "none";
}
this.className = "selector";
tabContent[this.id].style.display = "block";
}
}
}
可以直接執行