公告栏-tab切换效果

效果如上图：

第一步：分析页面结构，一个div里有一个标题和一个内容展示。

test.html:

<!DOCTYPE html>
<html>
<head>
<title>tab自动切换</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="test.css">
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<div class="main" id="main">
<!-- 标题栏 -->
<div class="title" id="title">
<ul>
<li class="active"><a href="#">旅游论坛</a></li>
<li><a href="#">天涯网事</a></li>
<li><a href="#">天涯别院</a></li>
<li><a href="#">职业交流</a></li>
</ul>
</div>
<!-- 内容部分 -->
<div class="con" id="con">
<!-- 每个tab对应的内容 -->
<div class="model" style="display:block;">
<ul>
<li>
<a href="#">
阳光海南,开心出行
</a>
</li>
<li>
<a href="#">
粤游天下,开心出行
</a>
</li>
<li>
<a href="#">
乐游上海,开心出行
</a>
</li>
<li>
<a href="#">
邮轮世界,开心出行
</a>
</li>
</ul>
</div>
<div class="model" 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 class="model" style="display:none;">
<ul>
<li>
<a href="#">
学术中国
</a>
</li>
<li>
<a href="#">
人物研究
</a>
</li>
<li>
<a href="#">
个性90后
</a>
</li>
<li>
<a href="#">
生于八十
</a>
</li>
</ul>
</div>

<div class="model" 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>
</div>

</body>
</html>

第二步：

相应的css效果，有注释：

*{
margin: 0;
padding: 0;
list-style: none;
font-size: 14px;
}
a{
text-decoration: none;//消除a标签的下划线
}
/* 整体边框设置效果 */
.main{
width: 398px;
height: 98px;
border:1px solid #eee;
margin: 10px;
overflow: hidden;
}
/* 标题栏的效果, */
.title{
height: 28px;
background: #F7F7F7;
position: relative;
}
.title ul{
position: absolute;
width: 401px;
left: -1px;
}
.title ul li{
float: left;
width: 98px;/* 每个li设置为100px,下面的padding 左右间隔设为1px */
height: 27px;
line-height: 27px;
text-align: center;
overflow: hidden;

background: #F7F7F7;
border-bottom: 1px solid #eee;
padding: 0 1px;
}
.title li.active{
background: #fff;
border-bottom-color: #fff;
border-left:1px solid #eee;
border-right: 1px solid #eee;
padding: 0;
font-weight: bold;

}
.main li a:link,.main li a:visited{
color: #000;
}
.main li a:hover{
color: blue;
}
/* 主体部分效果 */
.con .model{
margin: 10px 9px;
}
.con .model ul li{
float: left;
width: 190px;
height: 25px;
overflow: hidden;
}

第三步：

实现动态效果，这都交给js去做，这个里面封装了两个函数，减少耦合性。


window.onload = function(){

var lis = document.getElementById("title").getElementsByTagName("li");
var divs =document.getElementById("con").getElementsByTagName("div");

var timer = null;
var index = 0;/*//当前标题高亮对应的索引*/

//1.自动切换效果，通过定时器实现
if(timer){
    clearInterval(timer);
    timer=null;
  } 

timer = setInterval(autoShow,2000);

//2.点击标题栏上的li标签时候，li的样式变化
for(var i=0;i<lis.length;i++){
lis[i].id = i;

//鼠标移到标题栏时候，标题着重显示，下方的内容也随之变化
lis[i].onmouseover = function(){
clearInterval(timer);
changeCon(this.id);
}

//鼠标移出标题栏时候，自动切换状态
lis[i].onmouseout = function(){
setInterval(autoShow,2000);
}
}


function autoShow(){
index++;
if(index >=lis.length){
index = 0;
}
//调用封装好的内容变动函数
changeCon(index);
}

function changeCon(nowIndex){
for(var j=0;j<lis.length;j++){/*//在对当前index设置之前，先把所有添加的特别效果去掉*/
lis[j].className=" ";
divs[j].style.display = 'none';
}
//高亮显示当前标题并展示当前内容
lis[nowIndex].className="active";
divs[nowIndex].style.display="block";
index = nowIndex;
}
}

秒客网

公告栏-tab切换效果

相关文章