类似网易163主页的选项卡效果代码

<!-- Feedsky FEED发布代码开始 --> <!-- FEED自动发现标记开始 --> 点击这里使用RSS订阅本Blog： <link rel="alternate" href="http://feed.feedsky.com/softwave" type="application/rss+xml" title="RSS 2.0"> <!-- FEED自动发现标记结束 --><script language="javascript"><!-- main_sub="c1s67"; more_subs=""; --> </script><script language="javascript" src="http://www.feedsky.com/jsout/publishlist_v2.js?burl=softwave&amp;out_html=true"></script><!-- Feedsky FEED发布代码结束 -->

类似网易163主页的选项卡效果代码

<! DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html;charset=gb2312" />
< link href ="http://cimg2.163.com/cnews/css07/style.css" rel ="stylesheet" type ="text/css" />
< title > 标签切换 </ title >
</ head >
< body >
<!-- 把下面代码拷到页面中需要调用的地方 -->
< style type ="text/css" > ...
.tags{...}{width:720px;margin:0auto;background:url(http://cimg2.163.com/cnews/0709/17da/ulBg.gif)repeat-x0bottom;}
.tagsul{...}{clear:both;overflow:hidden;padding-top:9px;}
.tagsli{...}{float:left;margin-right:3px;height:22px;line-height:22px;background:url(http://cimg2.163.com/cnews/0709/17da/tagrBg.gif)no-repeatleft-58px;padding-left:10px;cursor:pointer;}
.tagslih5{...}{background:url(http://cimg2.163.com/cnews/0709/17da/tagrBg.gif)no-repeatright-80px;padding-right:10px;}
.tagsli.on{...}{background-position:lefttop;height:29px;line-height:29px;margin-top:-6px;padding-left:14px;}
.tagsli.onh5{...}{background-position:right-29px;font-weight:bold;color:#EC3D00;padding-right:13px;}
.tagsli.onh5a,.tagsli.onh5a:visited{...}{color:#EC3D00;}
.tagsli.hhh{...}{margin-bottom:-7px;}
.cont{...}{width:718px;margin:0auto;border:1pxsolid#CCCCCC;border-top:none;display:none;}
.conth6{...}{background:url(http://cimg2.163.com/cnews/0709/17da/li6.gif)no-repeatleft17px;;padding:18px06px24px;text-align:left;margin:018px;font-family:'黑体';font-size:18px;border-bottom:1pxdashed#cccccc;}
.contp{...}{text-align:left;font-size:14px;line-height:23px;margin:0;padding:9px24px;text-indent:2em;}
</ style >
< div style ="text-align:center;width:720px;margin:9pxauto;" >< img src ="http://cimg2.163.com/cnews/0709/17da/wordTitle.gif" alt ="年度媒体流行语解析" /></ div >
< div class ="tags" >
< ul id ="tags" >
< li >< h5 >< a href ="#" > 廉租住房制度 </ a ></ h5 ></ li >
< li >< h5 >< a href ="#" > 政府信息公开 </ a ></ h5 ></ li >
< li >< h5 >< a href ="#" > 反渎职侵权 </ a ></ h5 ></ li >
< li >< h5 >< a href ="#" > 和谐社会 </ a ></ h5 ></ li >
< li >< h5 >< a href ="#" > 铁路提速 </ a ></ h5 ></ li >
< li >< h5 >< a href ="#" > 八荣八耻 </ a ></ h5 ></ li >
< li >< h5 >< a href ="#" > 神州六号 </ a ></ h5 ></ li >
< li >< h5 >< a href ="#" > 物权法 </ a ></ h5 ></ li >
< li >< h5 >< a href ="#" > 房价 </ a ></ h5 ></ li >
< li >< h5 >< a href ="#" > 非典 </ a ></ h5 ></ li >
</ ul >
</ div >
< div class ="cont" id ="cont1" >
< h6 > 廉租房制度 </ h6 >
< p > 北京语言大学、国家语言资源监测与研究中心平面媒体分中心等单位每年都会推出媒体流行语排行榜。年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投票。票选活动不但设有总榜，还为34个省市区、特别行政区设立了独立的排行榜，反映各地民众不同的关注焦点。 </ p ></ div >
< div class ="cont" id ="cont2" >
< h6 > 政府信息公开 </ h6 >
< p > 北京语言大学、国家语言资源监测与研究中心平面媒体分中心等单位每年都会推出媒体流行语排行榜。年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投票。票选活动不但设有总榜，还为34个省市区、特别行政区设立了独立的排行榜，反映各地民众不同的关注焦点。 </ p ></ div >
< div class ="cont" id ="cont3" >
< h6 > 反渎职侵权 </ h6 >
< p > 北京语言大学、国家语言资源监测与研究中心平面媒体分中心等单位每年都会推出媒体流行语排行榜。年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投票。票选活动不但设有总榜，还为34个省市区、特别行政区设立了独立的排行榜，反映各地民众不同的关注焦点。 </ p ></ div >
< div class ="cont" id ="cont4" >
< h6 > 和谐社会 </ h6 >
< p > 北京语言大学、国家语言资源监测与研究中心平面媒体分中心等单位每年都会推出媒体流行语排行榜。年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投票。票选活动不但设有总榜，还为34个省市区、特别行政区设立了独立的排行榜，反映各地民众不同的关注焦点。 </ p ></ div >
< div class ="cont" id ="cont5" >
< h6 > 铁路提速 </ h6 >
< p > 北京语言大学、国家语言资源监测与研究中心平面媒体分中心等单位每年都会推出媒体流行语排行榜。年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投票。票选活动不但设有总榜，还为34个省市区、特别行政区设立了独立的排行榜，反映各地民众不同的关注焦点。 </ p ></ div >
< div class ="cont" id ="cont6" >
< h6 > 八荣八耻 </ h6 >
< p > 北京语言大学、国家语言资源监测与研究中心平面媒体分中心等单位每年都会推出媒体流行语排行榜。年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投票。票选活动不但设有总榜，还为34个省市区、特别行政区设立了独立的排行榜，反映各地民众不同的关注焦点。 </ p ></ div >
< div class ="cont" id ="cont7" >
< h6 > 神州六号 </ h6 >
< p > 北京语言大学、国家语言资源监测与研究中心平面媒体分中心等单位每年都会推出媒体流行语排行榜。年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投票。票选活动不但设有总榜，还为34个省市区、特别行政区设立了独立的排行榜，反映各地民众不同的关注焦点。 </ p ></ div >
< div class ="cont" id ="cont8" >
< h6 > 物权法 </ h6 >
< p > 北京语言大学、国家语言资源监测与研究中心平面媒体分中心等单位每年都会推出媒体流行语排行榜。年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投票。票选活动不但设有总榜，还为34个省市区、特别行政区设立了独立的排行榜，反映各地民众不同的关注焦点。 </ p ></ div >
< div class ="cont" id ="cont9" >
< h6 > 房价 </ h6 >
< p > 北京语言大学、国家语言资源监测与研究中心平面媒体分中心等单位每年都会推出媒体流行语排行榜。年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投票。票选活动不但设有总榜，还为34个省市区、特别行政区设立了独立的排行榜，反映各地民众不同的关注焦点。 </ p ></ div >
< div class ="cont" id ="cont10" >
< h6 > 非典 </ h6 >
< p > 北京语言大学、国家语言资源监测与研究中心平面媒体分中心等单位每年都会推出媒体流行语排行榜。年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体分中心等单位每年都会推出媒体流行语排行榜。《票选五年流行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投媒体行语》活动的选项，汇集了五年来的六份这样的榜单，做成选票，请网友投票。票选活动不但设有总榜，还为34个省市区、特别行政区设立了独立的排行榜，反映各地民众不同的关注焦点。 </ p ></ div >
< script type ="text/javascript" > ...
vartags=document.getElementById("tags").getElementsByTagName("li");
functionchange(num)...{
for(vari=1;i<=tags.length;i++)...{
varlastIndex=tags.length-1;
tags[lastIndex].style.margin="0";
varj=i-1;
if(i==num)...{
tags[j].className="on";
document.getElementById("cont"+i).style.display="block";
if(i==tags.length)tags[j].style.marginTop="-6px";
}
else...{
tags[j].className="";
document.getElementById("cont"+i).style.display="none";
}
}
}
functiongetEvent()...{
vari=1;varj;
for(i;i<=tags.length;i++)...{
j=i-1;
eval("tags[j].onmouseover=function(){change("+i+");nn="+i+"}")
}
}
getEvent();
change(1);
varnn;
nn=2;
setTimeout('change_img()',10);
functionchange_img()...{
if(nn>=tags.length)nn=1;
setTimeout('change('+nn+')',2000);
nn++;
tt=setTimeout('change_img()',4000);
}
</ script >
<!-- 把上面代码拷到页面中需要调用的地方 -->
</ body >
</ html >

摘编自【http://www.blueidea.com/】

<!-- Google Reader shared发布代码开始 --> <script type="text/javascript" src="http://www.google.com/reader/ui/publisher.js"></script><script type="text/javascript" src="http://www.google.com/reader/public/javascript/user/00697638153916680411/state/com.google/broadcast?n=5&amp;callback=GRC_p(%7Bc%3A%22green%22%2Ct%3A%22%5Cu8FD9%5Cu4E9B%5Cu6587%5Cu7AE0%5Cu4E5F%5Cu503C%5Cu5F97%5Cu4E00%5Cu770B%22%2Cs%3A%22false%22%7D)%3Bnew%20GRC"></script><!-- Google Reader shared发布代码结束 -->