1. 爱易网页
  2. JavaSript
  3. 关于UI Tabs的tab样式有关问题,jquery

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

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

关于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

相关资料更多>

  1. 《Nodejs入门》一书中存在的有关问题分析[转]
  2. Spring3.0+Struts2.2+Hibernate3.6+ExtJS3.2.0+DWR框架 调整二
  3. Ajax获取展示Json数据的一种方法
  4. js 动态增多删除行的实例
  5. innerText 火狐兼容性有关问题
  6. 令人印象深刻的运用独特javascript动画效果的网站
  7. 仿百度搜寻自动提示
  8. 怎么书写高质量js代码
  9. 关于js/jquery url传参的有关问题