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

点击这里使用RSS订阅本Blog： rel="alternate" href="http://feed.feedsky.com/softwave" type="application/rss+xml" title="RSS 2.0" /> <script language="javascript"> </script> <script language="javascript" src="http://www.feedsky.com/jsout/publishlist_v2.js?burl=softwave&out_html=true"></script>

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

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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:0 auto;background:url(http://cimg2.163.com/cnews/0709/17da/ulBg.gif) repeat-x 0 bottom;}
.tags ul {...}{clear:both; overflow:hidden;padding-top:9px;}
.tags li {...}{float:left; margin-right:3px; height:22px; line-height:22px; background:url(http://cimg2.163.com/cnews/0709/17da/tagrBg.gif) no-repeat left -58px; padding-left:10px; cursor:pointer;}
.tags li h5 {...}{background:url(http://cimg2.163.com/cnews/0709/17da/tagrBg.gif) no-repeat right -80px; padding-right:10px;}
.tags li.on {...}{background-position:left top; height:29px; line-height:29px; margin-top:-6px; padding-left:14px;}
.tags li.on h5 {...}{background-position:right -29px; font-weight:bold; color:#EC3D00; padding-right:13px;}
.tags li.on h5 a,.tags li.on h5 a:visited {...}{color:#EC3D00;}
.tags li.hhh {...}{margin-bottom:-7px;}
.cont {...}{width:718px; margin:0 auto; border:1px solid #CCCCCC; border-top:none; display:none;}
.cont h6 {...}{background:url(http://cimg2.163.com/cnews/0709/17da/li6.gif) no-repeat left 17px;; padding:18px 0 6px 24px; text-align:left; margin:0 18px; font-family:'黑体'; font-size:18px; border-bottom:1px dashed #cccccc;}
.cont p {...}{text-align:left; font-size:14px; line-height:23px; margin:0; padding:9px 24px; text-indent:2em;}
</ style >
< div  style ="text-align:center; width:720px; margin:9px auto;" >< 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" > ...
var tags=document.getElementById("tags").getElementsByTagName("li");
function change(num)...{
    for (var i=1; i<=tags.length;i++)...{
        var lastIndex=tags.length-1;
        tags[lastIndex].style.margin="0";
        var j=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";
        }
    }
}
function getEvent()...{
        var i=1;var j;
        for (i;i<=tags.length;i++)...{
            j=i-1;
            eval("tags[j].οnmοuseοver=function (){change("+i+");nn="+i+"}")
        }
}
getEvent();
change(1);
var nn;
nn=2;
setTimeout('change_img()',10);
function change_img()...{
    if(nn>=tags.length) nn=1;
    setTimeout('change('+nn+')',2000);
    nn++;
    tt=setTimeout('change_img()',4000);
}
</ script >
<!--  把上面代码拷到页面中需要调用的地方  -->
</ body >
</ html >

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

<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&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>