关于UI Tabs的tab样式问题,jquery

http://www.stilbuero.de/jquery/tabs_3/上面的连接是个典型的tabs切换例子，可是我一旦下载到本地以后切换效果是有，但是切换tab之间的样式就没了，为什么啊
当然我也有把它的样式改为本地地址的样式，js文件也是，就是没了样式效果，为什么呢
当然你如果有好的jquery tabs 现成例子给我推荐一个啊，急用，在线等！！!~~~~~~

解决方案 »

  1.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>jqeryTab.html</title>

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <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 {
    border: 1px solid #CCCCFF;
    width: 200px;
    height: 200px;
    }

    .header {
    height: 20px;
    width: 100%;
    }

    .liStyle {
    cursor: pointer;
    height: 20px;
    width: 64px;
    -width: 57px;
    float: left;
    border: 1px solid #CCCCFF;
    background-color: #CCFFFF;
    }

    .show {
    background-color: #A4F4E7;
    }

    .hide {
    background-color: #CCFFFF;
    }

    .ulHide {
    display: none;
    }

    .ulShow {
    display: block;
    }

    ul {
    list-style: none outside none;
    }

    * {
    margin: 0;
    padding: 0;
    }
    </style>

    <script type="text/javascript">
    $(function () {
    var ary = $("#tab > ul > li").click(function () {
    $(this).parent().find("li.show").addClass("hide").removeClass("show");
    $(this).addClass("show").removeClass("hide");
    $("#tab > div > ul.ulShow").addClass("ulHide").removeClass("ulShow");
    $("#tab > div > ul:eq(" + $.inArray(this, ary) + ")").addClass("ulShow").removeClass("ulHide");
    /*$("#tab > div > ul:eq(" + $.inArray(this, ary) + ")").addClass(function () {
    $.post("url?#", {param: "params"}, function (data) {
    $(this).html(data);
    });
    return "ulShow";
    }).removeClass("ulHide");*/
    }).toArray();
    });
    </script>
      </head>
      
      <body>
        <div id="tab">
         <ul class="header">
         <li class="liStyle show">Java</li>
         <li class="liStyle">Spring</li>
         <li class="liStyle">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>