代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{ margin:0px auto; padding:0px} #fenlei{ 500px; height:35px;} .xiang{ float:left; 100px; height:35px; text-align:center; line-height:35px; vertical-align:middle;} .xiang:hover{ cursor:pointer} .xuanxiang{ 500px; height:300px; display:none} #guonei{ background-color:#63C; display:block} #guoji{ background-color:#3C9} #tiyu{ background-color:#C36} #yule{ background-color:#FF6} </style> </head> <body> <br /> <div id="fenlei"> <div class="xiang" style="background-color:#63C" onclick="showa('guonei')">国内新闻</div> <div class="xiang" style="background-color:#3C9" onclick="showa('guoji')">国际新闻</div> <div class="xiang" style="background-color:#C36" onclick="showa('tiyu')">体育新闻</div> <div class="xiang" style="background-color:#FF6" onclick="showa('yule')">娱乐新闻</div> </div> <div id="guonei" class="xuanxiang"> </div> <div id="guoji" class="xuanxiang"> </div> <div id="tiyu" class="xuanxiang"> </div> <div id="yule" class="xuanxiang"> </div> <script type="text/javascript"> function showa(d) { var div = document.getElementById(d); var suoyou = document.getElementsByClassName("xuanxiang"); for(var i=0;i<suoyou.length;i++) { suoyou[i].style.display = "none"; } div.style.display = "block"; } </script> </body> </html>
结果如下：
点击国际新闻：
点击体育新闻：
