Posted in Javascript onNovember 01, 2013
在网页<head>区添加以下代码
<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(https://3water.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>
在网页<body>区添加以下代码
<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="https://3water.com" target=_self>三水点靠木</A><BR> <A href="http://play.3water.com" target=_self>播放器之家</A><BR> <A href="http://mingzi.3water.com" target=_self>个性名字网</A><BR> <A href="http://office.3water.com" target=_self>Office之家</A><BR> <A href="http://sc.3water.com" target=_self>素材之家</A><BR> <A href="http://yueduqi.3water.com" target=_self>阅读器之家</A><BR> <div align="right"><A href="https://3water.com" target=_self>...more</A></div> </SPAN> <SPAN> <A href="https://3water.com" target=_self>三水点靠木</A><BR> <A href="http://play.3water.com" target=_self>播放器之家</A><BR> <A href="http://mingzi.3water.com" target=_self>个性名字网</A><BR> <A href="http://office.3water.com" target=_self>Office之家</A><BR> <A href="http://sc.3water.com" target=_self>素材之家</A><BR> <A href="http://yueduqi.3water.com" target=_self>阅读器之家</A><BR> <div align="right"><A href="https://3water.com" target=_self>...more</A></div> </SPAN> <SPAN> <A href="https://3water.com" target=_self>三水点靠木</A><BR> <A href="http://play.3water.com" target=_self>播放器之家</A><BR> <A href="http://mingzi.3water.com" target=_self>个性名字网</A><BR> <A href="http://office.3water.com" target=_self>Office之家</A><BR> <A href="http://sc.3water.com" target=_self>素材之家</A><BR> <A href="http://yueduqi.3water.com" target=_self>阅读器之家</A><BR> <div align="right"><A href="https://3water.com" target=_self>...more</A></div> </SPAN> <SPAN> <A href="https://3water.com" target=_self>三水点靠木</A><BR> <A href="http://play.3water.com" target=_self>播放器之家</A><BR> <A href="http://mingzi.3water.com" target=_self>个性名字网</A><BR> <A href="http://office.3water.com" target=_self>Office之家</A><BR> <A href="http://sc.3water.com" target=_self>素材之家</A><BR> <A href="http://yueduqi.3water.com" target=_self>阅读器之家</A><BR> <div align="right"><A href="https://3water.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>
JS实现切换标签页效果实例代码
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@