jquery tab 选项卡功能-Ajax 专栏

jquery选项卡，带css样式的。支持ajax更新内容、页面同时出现多个tab选项卡而不影响其他选项卡内容。  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <title>jquery tab 选项卡</title>  
      
    <meta http-equiv="author" content="hoojo">  
    <meta http-equiv="description" content="this is my page">  
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    <script type="text/javascript" src="jquery.js"></script>  
    <style type="text/css">  
        .tab {  
            background-color: mintcream;  
            width: 200px;  
            -width: 205px;  
            height: 200px;  
            margin-left: 200px;   
        }  
          
        .header {  
            height: 20px;  
            width: 100%;  
        }  
          
        .content {  
            border: 1px solid #CCCCFF;  
            border-top: none;  
            height: 180px;  
        }  
          
        .liStyle {  
            cursor: pointer;  
            height: 20px;  
            width: 66px;  
            -width: 61px;  
            float: left;              
            background-color: white;  
        }  
          
        .show {  
            background-color: mintcream;  
            border: 1px solid #CCCCFF;  
            border-bottom: none;  
        }  
          
        .hide {  
            background-color: white;  
            border-bottom: 1px solid #CCCCFF;  
        }  
          
        .ulHide {  
            display: none;  
        }  
          
        .ulShow {  
            display: block;  
        }  
          
        ul {  
            list-style: none outside none;  
        }  
          
        * {  
            margin: 0;  
            padding: 0;  
        }  
    </style>  
      
    <script type="text/javascript">  
        $(function () {           
            $(".tab > ul.header > li").click(function () {  
                $(this).parent().find("li.show").addClass("hide").removeClass("show");  
                $(this).addClass("show").removeClass("hide");  
                var parentsEl = $(this).parents(".tab");  
                parentsEl.find("div > ul.ulShow").addClass("ulHide").removeClass("ulShow");  
                /*页面静态内容*/  
                var ary = parentsEl.find("ul.header > li");  
                parentsEl.find("div > ul:eq(" + $.inArray(this, ary) + ")").addClass("ulShow").removeClass("ulHide");      
                /*用ajax动态加载内容  
                parentsEl.find("div > ul:eq(" + $.inArray(this, ary) + ")").addClass(function () {  
                    var el = this;  
                    $.post("TreeDataServlet", {param: "params"}, function (data) {  
                        $(el).html(data);  
                    });  
                    return "ulShow";  
                }).removeClass("ulHide");*/       
            })  
        });  
    </script>  
  </head>  
    
  <body bgcolor="white">  
   <div class="tab">  
        <ul class="header">  
            <li class="liStyle show">Java</li>  
            <li class="liStyle hide">Spring</li>  
            <li class="liStyle hide">Hibernate</li>  
        </ul>  
        <div class="content">  
            <ul class="ulShow">  
                Java  
                <li>java javaSE</li>  
                <li>java javaME</li>  
                <li>java javaEE</li>  
            </ul>  
            <ul class="ulHide">  
                Spring  
                <li>java springMVC</li>  
                <li>java spring aop</li>  
                <li>java spring Ioc DI</li>  
            </ul>  
            <ul class="ulHide">  
                Hibernate  
                <li>java Hibernate Configuration Transaction</li>  
                <li>java Hibernate Query Criteria</li>  
                <li>java Hibernate Session SessionFactory</li>  
            </ul>  
        </div>  
    </div>  
    <hr/>  
    <div class="tab">  
        <ul class="header">  
            <li class="liStyle show">Java</li>  
            <li class="liStyle hide">Spring</li>  
            <li class="liStyle hide">Hibernate</li>  
        </ul>  
        <div class="content">  
            <ul class="ulShow">  
                Java....  
                <li>java javaSE</li>  
                <li>java javaME</li>  
                <li>java javaEE</li>  
            </ul>  
            <ul class="ulHide">  
                Spring....  
                <li>java springMVC</li>  
                <li>java spring aop</li>  
                <li>java spring Ioc DI</li>  
            </ul>  
            <ul class="ulHide">  
                Hibernate....  
                <li>java Hibernate Configuration Transaction</li>  
                <li>java Hibernate Query Criteria</li>  
                <li>java Hibernate Session SessionFactory</li>  
            </ul>  
        </div>  
    </div>  
  </body>  
</html>