关于UI Tabs的tab样式有关问题,jquery-JavaSript-爱易网页

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

日期：2014-05-16　浏览次数：20352 次

关于UI Tabs的tab样式问题,jquery
http://www.stilbuero.de/jquery/tabs_3/

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

------解决方案--------------------

HTML code


<!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 Criter

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>