| 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
|---|
| 2 | <html xmlns="http://www.w3.org/1999/xhtml"> |
|---|
| 3 | <head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> |
|---|
| 4 | <script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script> |
|---|
| 5 | <style> |
|---|
| 6 | #tabs li { display: inline-block; padding: 10px; background-color: #ccc; margin: 0px 2px 0px 0px} |
|---|
| 7 | #tabs { list-display-type: none; padding: 0; margin: 0 } |
|---|
| 8 | .panel { display: none; } |
|---|
| 9 | .panel.visible { display: block } |
|---|
| 10 | </style> |
|---|
| 11 | </head> |
|---|
| 12 | <body> |
|---|
| 13 | <ul id="tabs"> |
|---|
| 14 | <li panel="d1">Tab 1</li> |
|---|
| 15 | <li panel="d2">Tab 2</li> |
|---|
| 16 | </ul> |
|---|
| 17 | <div id="d1" class="panel visible" style="background-color:#f00;padding:20px">Div 1</div> |
|---|
| 18 | <div id="d2" class="panel" style="background-color:#00f;padding:20px">Div 2</div> |
|---|
| 19 | <script type="text/javascript"> |
|---|
| 20 | $().ready(function() { |
|---|
| 21 | $("#tabs li") |
|---|
| 22 | .css("cursor", "pointer") |
|---|
| 23 | .click(function() { |
|---|
| 24 | $(".panel:visible").fadeOut(200); |
|---|
| 25 | $("#" + $(this).attr("panel")).delay(200).animate({ "opacity": "toggle", "display": "toggle" }, 200); |
|---|
| 26 | }) |
|---|
| 27 | }); |
|---|
| 28 | </script> |
|---|
| 29 | </body> |
|---|
| 30 | </html> |
|---|
