<!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> <title></title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <style type="text/css"> *{margin:0px;padding:0px;} body{font-size:12px;} .box{margin:10px;padding:10px;} .box h3{margin:10px 0px;border-bottom:1px solid red;padding-bottom:10px;} .box p{line-height:20px;} #panels{margin:10px;padding:10px;width:380px;} #panels dt{height:30px;line-height:30px;padding-left:10px;border:1px solid #aaccff;font-weight:bold;font-size:14px;background-color:#bb44aa;margin-top:-1px;cursor:pointer;} #panels dd{height:230px;padding:10px;line-height:20px;border:1px solid #aaccff;margin-top:-1px;} </style> <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script> <script type="text/javascript"> $(function(){ $("#panels dd:not(dd:first)").hide() $("#panels dt").click(function(){ $("#panels dt").next().hide() $(this).next().toggle() }) }) </script> </head> <body> <div class="box"> <h3>试题要求:</h3> <p> 1.点击每组的标题时，显示该标题下的面板；同时隐藏其他的面板。<br /> 2.页面加载完毕后默认显示第一个标题下的面板。<br /> </p> </div> <dl id="panels"> <dt>DotNet23</dt> <dd>英雄们，该写作业了......</dd> <dt>DotNet24</dt> <dd>其实它只是个传说........</dd> <dt>DotNet25</dt> <dd>未完，待续......</dd> <dt>DotNet26</dt> <dd>此处省略一万字......</dd> </dl> </body> </html>
原文：http://www.cnblogs.com/xdcr/p/5040466.html