tab标签代码切换效果
1、新建html文档。
2、准备好需要用到的图标。
3、书写hmtl代码。
<div align="center">
<div class="news" id="haha1">
<ul>
<li> <span>2008-05-16</span> 标题1标题1标题1标题1标题1标题1标题1标题1. </li>
<li> <span>2008-05-04</span> <a href="#"> 标题2标题2标题2标题2标题2标题2标题2标题2. </a> </li>
<li> <span>2008-04-09</span> <a href="#"> 标题3标题3标题3标题3标题3标题3标题3标题3. </a> </li>
<li> <span>2008-03-20</span> <a href="#"> 标题4标题4标题4标题4标题4标题4标题4标题4. </a> </li>
<li> <span>2008-03-20</span> <a href="#"> 标题5标题5标题5标题5标题5标题5标题5标题5. </a> </li>
</ul>
<ol class="activeOL">
</ol>
</div>
<br />
<div class="news" id="haha2">
<ul>
<li> <span>2008-05-16</span> 标题1标题1标题1标题1标题1标题1标题1标题1. </li>
<li> <span>2008-05-04</span> <a href="#"> 标题2标题2标题2标题2标题2标题2标题2标题2. </a> </li>
<li> <span>2008-04-09</span> <a href="#"> 标题3标题3标题3标题3标题3标题3标题3标题3. </a> </li>
<li> <span>2008-03-20</span> <a href="#"> 标题4标题4标题4标题4标题4标题4标题4标题4. </a> </li>
</ul>
<ol class="activeOL">
</ol>
</div>
<br />
<div class="news" id="haha3">
<ul>
<li> <span>2008-05-16</span> <a href="#"> 标题2标题2标题2标题2标题2标题2标题2标题2. </a> </li>
<li> <span>2008-05-04</span> <a href="#"> 标题2标题2标题2标题2标题2标题2标题2标题2. </a> </li>
<li> <span>2008-04-09</span> <a href="#"> 标题3标题3标题3标题3标题3标题3标题3标题3. </a> </li>
</ul>
<ol class="activeOL">
</ol>
</div>
</div>
4、书写css代码。
body { FONT-SIZE: 12px; MARGIN: 50px; TEXT-AliGN: center }
img { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px }
.news { CLEAR: both; BACKGROUND: url(../images/news_bg.gif); WIDTH: 672px; ColOR: #fff; HEIGHT: 26px }
.news ul { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; liNE-HEIGHT: 26px; PADDING-TOP: 0px; liST-STYLE-TYPE: none; HEIGHT: 26px }
.news ul li { MARGIN: 0px 0px 0px 1em; text-align: left; }
.news ul li.active { DISPLAY: block }
.news span { BORDER-RIGHT: #fff 1px solid; PADDING-RIGHT: 0.75em; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0.75em 0px 0px; PADDING-TOP: 0px }
.news ul A { ColOR: #fff; TEXT-DECORATION: none }
.news ul A:hover { TEXT-DECORATION: underline }
.news ol { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: right; PADDING-BOTTOM: 0px; MARGIN: -19px 8px 0px 0px; PADDING-TOP: 0px; liST-STYLE-TYPE: none }
.news ol li { DISPLAY: inline; MARGIN: 0px 0px 0px 3px; width: 10px; }
.news ol li A { BACKGROUND: url(../images/switcher.gif) 0px -10px }
.news ol li A:hover { BACKGROUND: url(../images/switcher.gif) 0px 10px }
.news ol li A.active { BACKGROUND: url(../images/switcher.gif) 0px 0px }
.news ol li A.active:hover { BACKGROUND: url(../images/switcher.gif) 0px 0px }
5、书写并添加js代码。
<script src="js/jquery-1[1].2.1.pack.js"></script>
<script>
function scrollNews(selector,Entry,time,StartIndex)
{
var _self=this;
this.Selector=selector;
this.Entry=Entry;
this.time = time;
this.i=StartIndex||0;
this.Count=$(this.Selector+" ul li").length;
$(this.Selector+" ul li").hide();//全部隐藏
$(this.Selector+" ul li").eq(this.i).show();//第i个显示
$(this.Selector).bind("mouseenter",function(){
if(_self.sI){clearInterval(_self.sI);}
}).bind("mouseleave",function(){
_self.showIndex(_self.i++);
})
for(var j=0;j<this.Count;j++)
$(this.Selector+" .activeOL").append('<li><a onclick="'+this.Entry+'.showIndex('+j+');" href="#"><img src="images/crystal.gif"></a></li>');
$(this.Selector+" ol li a").eq(this.i).addClass("active");
this.sI=setInterval(this.Entry+".showIndex(null)",this.time);
this.GetSelector=function(){return this.Selector;}
this.showIndex=function(index)
{
this.i++;
if(this.sI){clearInterval(this.sI);}
this.sI=setInterval(this.Entry+".showIndex()",this.time);
if (index!=null)
{
this.i=index;
}
if(this.i==this.Count)
this.i=0;
$(this.Selector+" ul li").hide();
$(this.Selector+" ul li").eq(this.i).slideDown();
$(this.Selector+" ol li a").removeClass("active");
$(this.Selector+" ol li a").eq(this.i).addClass("active");
}
}
var s=new scrollNews("#haha1","s", 1000 , 3);
var s2=new scrollNews("#haha2","s2" , 2000);
var haha3=new scrollNews("#haha3","haha3" , 3000 , 1);
</script>
6、代码整体结构。
7、查看效果。
