现在大多数列表切换都是把<div style="display:block"></div> 这个div的display设置为none或block来实现的，就是你点击一个列表的时候这个列表所要表现的div的display变为block，其他的设置为none,所以看到了这个列表的东西反之亦然<script><!-- function setTab(name,cursel,n){ for(i=1i<=ni++){ var menu=document.getElementById(name+i) var con=document.getElementById("con_"+name+"_"+i) menu.className=i==cursel?"hover":"" con.style.display=i==cursel?"block":"none" } } //--> </script> <style type="text/css"> <!-- body,div,ul,li{ padding:0 text-align:center } body{ font:12px "宋体" text-align:center } a:link{ color:#00F text-decoration:none } a:visited { color: #00F text-decoration:none } a:hover { color: #c00 text-decoration:underline } ul{ list-style:none} #Tab1{ width:460px margin:0px padding:0px .Menubox { width:100% background:url(image.gif) height:28px line-height:28px } .Menubox ul{ margin:0px padding:0px } .Menubox li{ float:left display:block cursor:pointer width:114px text-align:center color:#949694 font-weight:bold } .Menubox li.hover{ padding:0px background:#fff width:116px border-left:1px solid #A8C29F border-top:1px solid #A8C29F border-right:1px solid #A8C29F background:url(imagehover.gif) color:#739242 font-weight:bold height:27px line-height:27px } .Menubox_on { padding:0px background:#fff width:116px border-left:1px solid #A8C29F border-top:1px solid #A8C29F border-right:1px solid #A8C29F background:url(imagehover.gif) color:#739242 font-weight:bold height:27px line-height:27px } .Contentbox{ clear:both margin-top:0px border:1px solid #A8C29F border-top:none height:181px text-align:center padding-top:8px } --> </style> <div id="Tab1"> <div class="Menubox"> <ul> <li id="one1" onmouseover="setTab('one',1,4)" class="Menubox_on" >新闻1</li> <li id="one2" onmouseover="setTab('one',2,4)" >新闻2</li> <li id="one3" onmouseover="setTab('one',3,4)">新闻3</li> <li id="one4" onmouseover="setTab('one',4,4)">新闻4</li> </ul> </div> <div class="Contentbox"> <div id="con_one_1" ><table width="200" border="0" cellspacing="0" cellpadding="0"><tr><td>11111</td><td>22222</td></tr><tr><td>33333</td><td>44444</td></tr></table></div> <div id="con_one_2" style="display:none">新闻列表2</div> <div id="con_one_3" style="display:none">新闻列表3</div> <div id="con_one_4" style="display:none">新闻列表4</div> </div> </div>
