|
0
|
1
|
|
|
2 <!DOCTYPE html>
|
|
|
3 <html>
|
|
|
4 <head>
|
|
|
5 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
|
|
|
6 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
|
|
|
7 <script>
|
|
|
8 $('#tabs').tabs();
|
|
|
9 $('#tabs1').tabs();
|
|
|
10 $('#tabs2').tabs();
|
|
|
11 </script>
|
|
|
12 <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css">
|
|
|
13 </head>
|
|
|
14 <body><div id="tabs">
|
|
|
15 <ul>
|
|
|
16 <li><a href="#tabs-1">First tab</a></li>
|
|
|
17 <li><a href="#tabs-2">Second tab</a></li>
|
|
|
18 </ul>
|
|
|
19 <div id="tabs-1">
|
|
|
20 <p>
|
|
|
21 <div id="tabs1">
|
|
|
22 <ul>
|
|
|
23 <li><a href="#tabs-11">First nested 1</a></li>
|
|
|
24 <li><a href="#tabs-12">Second nested 1</a></li>
|
|
|
25 </ul>
|
|
|
26 <div id="tabs-11">
|
|
|
27 <p>Content for first nested tab 1</p>
|
|
|
28 </div>
|
|
|
29 <div id="tabs-12">
|
|
|
30 <p>Content for second nested tab 2</p>
|
|
|
31 </div>
|
|
|
32 </div>
|
|
|
33 </p>
|
|
|
34 </div>
|
|
|
35 <div id="tabs-2">
|
|
|
36 <p>
|
|
|
37 <div id="tabs2">
|
|
|
38 <ul>
|
|
|
39 <li><a href="#tabs-21">First nested tab 2</a></li>
|
|
|
40 <li><a href="#tabs-22">Second nested tab 2</a></li>
|
|
|
41 </ul>
|
|
|
42 <div id="tabs-21">
|
|
|
43 <p>Content of first nested tab 2</p>
|
|
|
44 </div>
|
|
|
45 <div id="tabs-22">
|
|
|
46 <p>Content of second nested tab 2</p>
|
|
|
47 </div>
|
|
|
48 </div>
|
|
|
49 </p>
|
|
|
50 </div>
|
|
|
51 </div>
|
|
|
52 </body>
|
|
|
53 </html>
|
