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>
