JS实现切换标签页效果实例代码

　　<style type="text/css">

　　<!--

　　BODY {

　　PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; COLOR: black; LINE-HEIGHT: 150%; PADDING-TOP: 10px; BACKGROUND-COLOR: white; TEXT-ALIGN: center

　　}

　　.dis {

　　DISPLAY: block

　　}

　　.undis {

　　DISPLAY: none

　　}

　　#cntR {

　　WIDTH: 302px

　　}

　　#NewsTop {

　　CLEAR: both; MARGIN-BOTTOM: 16px

　　}

　　#NewsTop P {

　　FLOAT: left; LINE-HEIGHT: 21px

　　}

　　#NewsTop P.topTit {

　　FONT-WEIGHT: bold; WIDTH: 117px

　　}

　　#NewsTop P.topC0 {

　　BACKGROUND: #dcdcdc; BORDER-LEFT: #f2f2f2 1px solid; WIDTH: 40px; CURSOR: pointer

　　}

　　#NewsTop P.topC1 {

　　BACKGROUND: #c2130e; BORDER-LEFT: #f2f2f2 1px solid; WIDTH: 40px; COLOR: #fff

　　}

　　#NewsTop #NewsTop_tit {

　　BORDER-BOTTOM: #c2130e 3px solid; HEIGHT: 21px

　　}

　　#NewsTop #NewsTop_cnt {

　　PADDING-LEFT: 32px; BACKGROUND: url(http://www.glzy8.com/code/table/tab/o2007320133249.gif) no-repeat 12px 13px; LINE-HEIGHT: 26px; PADDING-TOP: 7px; HEIGHT: 260px; TEXT-ALIGN: left

　　}

　　#NewsTop #NewsTop_cnt A {

　　COLOR: #666; TEXT-DECORATION: none

　　}

　　#NewsTop #NewsTop_cnt A:hover {

　　COLOR: #c2130e; TEXT-DECORATION: underline

　　}

　　-->

　　</style>

　　<DIV id=cntR>

　　<DIV id=NewsTop>

　　<DIV id=NewsTop_tit>

　　<P class=topTit>新闻排行</P>

　　<P class=topC0>国内</P>

　　<P class=topC0>国际</P>

　　<P class=topC0>社会</P>

　　<P class=topC0>网评</P>

　　</DIV>

　　<DIV id=NewsTop_cnt><SPAN title="Don't delete me"></SPAN>

　　<SPAN>

　　<A href="http://www.glzy8.com" target=_self>管理资源吧</A><BR>

　　<A href="http://play.glzy8.com" target=_self>播放器之家</A><BR>

　　<A href="http://mingzi.glzy8.com" target=_self>个性名字网</A><BR>

　　<A href="http://office.glzy8.com" target=_self>Office之家</A><BR>

　　<A href="http://sc.glzy8.com" target=_self>素材之家</A><BR>

　　<A href="http://yueduqi.glzy8.com" target=_self>阅读器之家</A><BR>

　　<div align="right"><A href="http://www.glzy8.com" target=_self>...more</A></div>

　　</SPAN>

　　<SPAN>

　　<A href="http://www.glzy8.com" target=_self>管理资源吧</A><BR>

　　<A href="http://play.glzy8.com" target=_self>播放器之家</A><BR>

　　<A href="http://mingzi.glzy8.com" target=_self>个性名字网</A><BR>

　　<A href="http://office.glzy8.com" target=_self>Office之家</A><BR>

　　<A href="http://sc.glzy8.com" target=_self>素材之家</A><BR>

　　<A href="http://yueduqi.glzy8.com" target=_self>阅读器之家</A><BR>

　　<div align="right"><A href="http://www.glzy8.com" target=_self>...more</A></div>

　　</SPAN>

　　<SPAN>

　　<A href="http://www.glzy8.com" target=_self>管理资源吧</A><BR>

　　<A href="http://play.glzy8.com" target=_self>播放器之家</A><BR>

　　<A href="http://mingzi.glzy8.com" target=_self>个性名字网</A><BR>

　　<A href="http://office.glzy8.com" target=_self>Office之家</A><BR>

　　<A href="http://sc.glzy8.com" target=_self>素材之家</A><BR>

　　<A href="http://yueduqi.glzy8.com" target=_self>阅读器之家</A><BR>

　　<div align="right"><A href="http://www.glzy8.com" target=_self>...more</A></div>

　　</SPAN>

　　<SPAN>

　　<A href="http://www.glzy8.com" target=_self>管理资源吧</A><BR>

　　<A href="http://play.glzy8.com" target=_self>播放器之家</A><BR>

　　<A href="http://mingzi.glzy8.com" target=_self>个性名字网</A><BR>

　　<A href="http://office.glzy8.com" target=_self>Office之家</A><BR>

　　<A href="http://sc.glzy8.com" target=_self>素材之家</A><BR>

　　<A href="http://yueduqi.glzy8.com" target=_self>阅读器之家</A><BR>

　　<div align="right"><A href="http://www.glzy8.com" target=_self>...more</A></div>

　　</SPAN>

　　</DIV>

　　<SCRIPT>

　　var Tags=document.getElementById('NewsTop_tit').getElementsByTagName('p');

　　var TagsCnt=document.getElementById('NewsTop_cnt').getElementsByTagName('span');

　　var len=Tags.length;

　　var flag=1;//修改默认值

　　for(i=1;i<len;i++){

　　Tags[i].value = i;

　　Tags[i].onmouseover=function(){changeNav(this.value)};

　　TagsCnt[i].className='undis';

　　}

　　Tags[flag].className='topC1';

　　TagsCnt[flag].className='dis';

　　function changeNav(v){

　　Tags[flag].className='topC0';

　　TagsCnt[flag].className='undis';

　　flag=v;

　　Tags[v].className='topC1';

　　TagsCnt[v].className='dis';

　　}

　　</SCRIPT>

　　</DIV>

　　</DIV>