1.       jquery选项卡，带css样式的。支持ajax更新内容、页面同时出现多个tab选项卡而不影响其他选项卡内容。  
    2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    3. <html>  
    4.   <head>  
    5.     <title>jquery tab 选项卡</title>  
    7.     <meta http-equiv="author" content="hoojo">  
    8.     <meta http-equiv="description" content="this is my page">  
    9.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    10.     <script type="text/javascript" src="jquery.js"></script>  
    11.     <style type="text/css">  
    12.         .tab {  
    13.             background-color: mintcream;  
    14.             width: 200px;  
    15.             -width: 205px;  
    16.             height: 200px;  
    17.             margin-left: 200px;   
    18.         }  
    20.         .header {  
    21.             height: 20px;  
    22.             width: 100%;  
    23.         }  
    25.         .content {  
    26.             border: 1px solid #CCCCFF;  
    27.             border-top: none;  
    28.             height: 180px;  
    29.         }  
    31.         .liStyle {  
    32.             cursor: pointer;  
    33.             height: 20px;  
    34.             width: 66px;  
    35.             -width: 61px;  
    36.             float: left;              
    37.             background-color: white;  
    38.         }  
    40.         .show {  
    41.             background-color: mintcream;  
    42.             border: 1px solid #CCCCFF;  
    43.             border-bottom: none;  
    44.         }  
    46.         .hide {  
    47.             background-color: white;  
    48.             border-bottom: 1px solid #CCCCFF;  
    49.         }  
    51.         .ulHide {  
    52.             display: none;  
    53.         }  
    55.         .ulShow {  
    56.             display: block;  
    57.         }  
    59.         ul {  
    60.             list-style: none outside none;  
    61.         }  
    63.         * {  
    64.             margin: 0;  
    65.             padding: 0;  
    66.         }  
    67.     </style>  
    69.     <script type="text/javascript">  
    70.         $(function () {           
    71.             $(".tab > ul.header > li").click(function () {  
    72.                 $(this).parent().find("li.show").addClass("hide").removeClass("show");  
    73.                 $(this).addClass("show").removeClass("hide");  
    74.                 var parentsEl = $(this).parents(".tab");  
    75.                 parentsEl.find("div > ul.ulShow").addClass("ulHide").removeClass("ulShow");  
    76.                 /*页面静态内容*/  
    77.                 var ary = parentsEl.find("ul.header > li");  
    78.                 parentsEl.find("div > ul:eq(" + $.inArray(this, ary) + ")").addClass("ulShow").removeClass("ulHide");      
    79.                 /*用ajax动态加载内容  
    80.                 parentsEl.find("div > ul:eq(" + $.inArray(this, ary) + ")").addClass(function () {  
    81.                     var el = this;  
    82.                     $.post("TreeDataServlet", {param: "params"}, function (data) {  
    83.                         $(el).html(data);  
    84.                     });  
    85.                     return "ulShow";  
    86.                 }).removeClass("ulHide");*/       
    87.             })  
    88.         });  
    89.     </script>  
    90.   </head>  
    92.   <body bgcolor="white">  
    93.    <div class="tab">  
    94.         <ul class="header">  
    95.             <li class="liStyle show">Java</li>  
    96.             <li class="liStyle hide">Spring</li>  
    97.             <li class="liStyle hide">Hibernate</li>  
    98.         </ul>  
    99.         <div class="content">  
    100.             <ul class="ulShow">  
    101.                 Java  
    102.                 <li>java javaSE</li>  
    103.                 <li>java javaME</li>  
    104.                 <li>java javaEE</li>  
    105.             </ul>  
    106.             <ul class="ulHide">  
    107.                 Spring  
    108.                 <li>java springMVC</li>  
    109.                 <li>java spring aop</li>  
    110.                 <li>java spring Ioc DI</li>  
    111.             </ul>  
    112.             <ul class="ulHide">  
    113.                 Hibernate  
    114.                 <li>java Hibernate Configuration Transaction</li>  
    115.                 <li>java Hibernate Query Criteria</li>  
    116.                 <li>java Hibernate Session SessionFactory</li>  
    117.             </ul>  
    118.         </div>  
    119.     </div>  
    120.     <hr/>  
    121.     <div class="tab">  
    122.         <ul class="header">  
    123.             <li class="liStyle show">Java</li>  
    124.             <li class="liStyle hide">Spring</li>  
    125.             <li class="liStyle hide">Hibernate</li>  
    126.         </ul>  
    127.         <div class="content">  
    128.             <ul class="ulShow">  
    129.                 Java....  
    130.                 <li>java javaSE</li>  
    131.                 <li>java javaME</li>  
    132.                 <li>java javaEE</li>  
    133.             </ul>  
    134.             <ul class="ulHide">  
    135.                 Spring....  
    136.                 <li>java springMVC</li>  
    137.                 <li>java spring aop</li>  
    138.                 <li>java spring Ioc DI</li>  
    139.             </ul>  
    140.             <ul class="ulHide">  
    141.                 Hibernate....  
    142.                 <li>java Hibernate Configuration Transaction</li>  
    143.                 <li>java Hibernate Query Criteria</li>  
    144.                 <li>java Hibernate Session SessionFactory</li>  
    145.             </ul>  
    146.         </div>  
    147.     </div>  
    148.   </body>  
    149. </html>
    150.