1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>第三章示例1</title> 6 <style type="text/css"> 7 body { width:760px; } 8 div { float:left; width:200px; margin:10px 20px; font-family:\5FAE\8F6F\96C5\9ED1; color:white; background:green; } 9 h3 { cursor:pointer; margin:0; } 10 ul { list-style:none; margin:0; padding:5px 0; border:3px solid black; display:none; } 11 .highlight{ color:black; background-color:gold; } 12 </style> 13 <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> 14 <script type="text/javascript"> 15 $(document).ready(function(){ 16 $("div").click(function(){ 17 $(this).addClass("highlight") 18 .children("ul").show().end() 19 .siblings().removeClass("highlight") 20 .children("ul").hide(); 21 }); 22 }); 23 </script> 24 </head> 25 <body> 26 <div> 27 <h3>主题一（点击我）</h3> 28 <ul> 29 <li>内容段落1</li> 30 <li>内容段落2</li> 31 <li>内容段落3</li> 32 </ul> 33 </div> 34 <div> 35 <h3>主题二（点击我）</h3> 36 <ul> 37 <li>内容段落1</li> 38 <li>内容段落2</li> 39 <li>内容段落3</li> 40 </ul> 41 </div> 42 <div> 43 <h3>主题三（点击我）</h3> 44 <ul> 45 <li>内容段落1</li> 46 <li>内容段落2</li> 47 <li>内容段落3</li> 48 </ul> 49 </div> 50 </body> 51 </html>
