1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> 2 <HTML><HEAD><TITLE>绝对经典的滑轮新闻显示(javascript+css)</TITLE> 3 <META http-equiv=Content-Type content="text/html; charset=gb2312"> 4 <style type="text/css"> 5 <!-- 6 *{padding:0; margin:0} 7 img{border:0; display:block;} 8 BODY { 9 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 10 } 11 .dis { 12 DISPLAY: block 13 } 14 .undis { 15 DISPLAY: none 16 } 17 #cntR { 18 WIDTH: 302px 19 } 20 #NewsTop { 21 CLEAR: both; MARGIN-BOTTOM: 16px 22 } 23 #NewsTop P { 24 FLOAT: left; LINE-HEIGHT: 21px 25 } 26 #NewsTop P.topTit { 27 FONT-WEIGHT: bold; WIDTH: 117px 28 } 29 #NewsTop P.topC0 { 30 BACKGROUND: #dcdcdc; BORDER-LEFT: #f2f2f2 1px solid; WIDTH: 40px; CURSOR: pointer 31 } 32 #NewsTop P.topC1 { 33 BACKGROUND: #c2130e; BORDER-LEFT: #f2f2f2 1px solid; WIDTH: 40px; COLOR: #fff 34 } 35 #NewsTop #NewsTop_tit { 36 BORDER-BOTTOM: #c2130e 3px solid; HEIGHT: 21px 37 } 38 #NewsTop #NewsTop_cnt { 39 PADDING-LEFT: 32px; BACKGROUND: url(o2007320133249.gif) no-repeat 12px 13px; LINE-HEIGHT: 26px; PADDING-TOP: 7px; HEIGHT: 260px; TEXT-ALIGN: left 40 } 41 #NewsTop #NewsTop_cnt A { 42 COLOR: #666; TEXT-DECORATION: none 43 } 44 #NewsTop #NewsTop_cnt A:hover { 45 COLOR: #c2130e; TEXT-DECORATION: underline 46 } 47 --> 48 </style> 49 </HEAD> 50 <BODY> 51 <DIV id="cntR"> 52 <DIV id="NewsTop"> 53 <DIV id="NewsTop_tit"> 54 <P class="topTit">新闻排行</P> 55 <P class="topC0">国内</P> 56 <P class="topC0">国际</P> 57 <P class="topC0">社会</P> 58 <P class="topC0">网评</P> 59 </DIV> 60 61 <SCRIPT> 62 var Tags=document.getElementById('NewsTop_tit').getElementsByTagName('p'); var len=Tags.length; 63 var flag=1;//修改默认值 64 for(i=1;i<len;i++){ 65 Tags[i].value = i; 66 Tags[i].onclick=function(){changeNav(this.value)}; 67 } 68 Tags[flag].className='topC1'; function changeNav(v){ 69 Tags[flag].className='topC0'; flag=v; 70 Tags[v].className='topC1'; 71 } 72 </SCRIPT> 73 </DIV> 74 </DIV> 75 </BODY></HTML>
鼠标点击后更换背景
------------------------------------------华丽丽的分割线---------------------
------------------------------------
源厂制造10-10000级洁净无尘车间防静电防尘用品!网址:http://www.lgfjd.com 微信号:614412
源厂制造10-10000级洁净无尘车间防静电防尘用品!网址:http://www.lgfjd.com 微信号:614412