很不错的一个列表代码，重点是用H1标签作为项目标题，关联了其下的DL列表，使得列表具有清晰结构，即使在丢失CSS的时候，仍能保持其良好表现。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<div class="link"> <h1>站长特效 - 国内一流网页特效、广告代码</h1> <div id="linklist2"> <h2>新闻</h2> <dl> <dd><a href="http://www.zzjs.net">[新闻]站长特效一号新闻标题</a></dd> <dd><a href="http://www.zzjs.net">[新闻]站长特效二号新闻标题</a></dd> <dd><a href="http://www.zzjs.net">[新闻]站长特效三号新闻标题</a></dd> </dl> <h2>火炬</h2> <dl> <dd><a href="http://www.zzjs.net">[火炬]轿车逆行撞死斑马线上7岁学后逃逸</a></dd> <dd><a href="http://www.zzjs.net">BMP位图按钮的VC++实现</a></dd> <dd><a href="http://www.zzjs.net">[火炬]河南驻马店警方配备宝马警车</a></dd> </dl> <h2>图片</h2> <dl> <dd><a href="http://www.zzjs.net">BMP位图按钮的VC++实现</a></dd> <dd><a href="http://www.zzjs.net">[图片]网友创作歌曲"人民心疼你"总理敬意</a></dd> <dd><a href="http://www.zzjs.net">计算机机房管理系统Delphi源代码</a></dd> </dl> <h2>锐点</h2> <dl> <dd><a href="http://www.zzjs.net">计算机机房管理系统Delphi源代码</a></dd> <dd><a href="http://www.zzjs.net">[锐点]阿拉伯媒体称赖斯正与卡扎菲长子热恋</a></dd> <dd><a href="http://www.zzjs.net">BMP位图按钮的VC++实现</a></dd> </dl> </div> </div> <script type="text/javascript">// <![CDATA[ function $(id){return document.getElementById(id);} function $tag(id,tagName){return $(id).getElementsByTagName(tagName)} var onum=0;//默认打开的标签 var Ds=$tag("linklist","dl"); var Ts=$tag("linklist","h2"); for(var i=0; i<Ds.length;i++){ if(i==onum){ Ds[i].style.display="block"; Ts[i].className = "title_current"; } else{ Ds[i].style.display="none"; Ts[i].className = "title_normal"; } Ts[i].value=i; Ts[i].onclick=function(){ if(onum==this.value){return false;}; Ts[onum].className="title_normal"; Ts[this.value].className="title_current"; Ds[onum].style.display="none"; Ds[this.value].style.display="block"; onum=this.value; } }</script> |