类似淘宝首页右侧的标签切换效果。
效果如下：
HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tab切换</title>
<link type="text/css" rel="stylesheet" href="index.css">
<script src="index.js"></script>
</head>
<body>
<div id="tab">
<div id = "tab-title">
<ul>
<li>
<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 id="tab-content">
<div style="display: block">
<ul>
<li>
<a href="#">八千家4S店参与双11</a>
</li>
<li>
<a href="#">八千家4S店参与双11</a>
</li>
<li>
<a href="#">八千家4S店参与双11</a>
</li>
<li>
<a href="#">八千家4S店参与双11</a>
</li>
</ul>
</div>
<div style="display: none">
<ul>
<li>
<a href="#">谨防假冒客服诱导退款</a>
</li>
<li>
<a href="#">谨防假冒客服诱导退款</a>
</li>
<li>
<a href="#">谨防假冒客服诱导退款</a>
</li>
<li>
<a href="#">谨防假冒客服诱导退款</a>
</li>
</ul>
</div>
<div style="display: none">
<ul>
<li>
<a href="#">阿里云运营智慧城市</a>
</li>
<li>
<a href="#">阿里云运营智慧城市</a>
</li>
<li>
<a href="#">阿里云运营智慧城市</a>
</li>
<li>
<a href="#">阿里云运营智慧城市</a>
</li>
</ul>
</div>
<div style="display: none">
<ul>
<li>
<a href="#">故宫创意产品来袭啦</a>
</li>
<li>
<a href="#">故宫创意产品来袭啦</a>
</li>
<li>
<a href="#">故宫创意产品来袭啦</a>
</li>
<li>
<a href="#">故宫创意产品来袭啦</a>
</li>
</ul>
</div>
<div style="display: none">
<ul>
<li>
<a href="#">阿里发布 YunOS 3.0</a>
</li>
<li>
<a href="#">阿里发布 YunOS 3.0</a>
</li>
<li>
<a href="#">阿里发布 YunOS 3.0</a>
</li>
<li>
<a href="#">阿里发布 YunOS 3.0</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
JS代码如下：
/** 如果你使用了JQuery，那下面这段话应该去掉 */
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 = "select";
tabContent[this.id].style.display = "block";
}
}
}
CSS代码如下：
*{
margin: 0;
padding: 0;
list-style: none;
font-size: 12px;
}
.tab{
width: 298px;
height: 98px;
margin: 10px;
border: 1px solid #eee;
overflow: hidden;
}
.tab-title{
height: 27px;
position: relative;
background: #f7f7f7;
}
.tab-title ul{
position: absolute;
width: 301px;
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.select{
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;
}
下载三个文件：
index.zip
