在第一次使用CSS基本上优化，使用jQuery：效果、回调、教程

来源：互联网发布：淘宝tm商标可以吗编辑：程序博客网时间：2024/06/13 23:20
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML> <HEAD>  <TITLE> JiangHuMeng Game Network Communication Decoder Instruction </TITLE>  <META NAME="Generator" CONTENT="EditPlus">  <META NAME="Author" CONTENT="Jave.Lin">  <META NAME="Keywords" CONTENT="Decoder Instruction">  <META NAME="Description" CONTENT="JiangHuMeng Game Network Communication Decoder Instruction">  <script type="text/javascript" src="jQuery.js"/></script>  <script type="text/javascript">    function showAll(callback)    {        //将所有表显示        var arr=$("table.packageTB");        var arrayLength=arr.length;var currentCompleteNum=0;arr.fadeIn("normal",function(){currentCompleteNum++;if(currentCompleteNum==arrayLength){callback();}});    }    function hideAll(callback){    var arr=$("table.packageTB");var arrayLength=arr.length;var currentCompleteNum=0;arr.fadeOut("normal",function(){currentCompleteNum++;if(currentCompleteNum==arrayLength){callback();}});}    function onSelectedHandler(value)    {        //显示所有表格        if(value=="all")        {            //将所有表显示            showAll();        }        //筛选指定的        else        {            //隐藏所有类名为：packageTR的表            hideAll(function(){    //显示id为:value的表$("table#"+value).fadeIn();});        }    }  </script>  <style>    BODY     {        FONT-SIZE: 12px;        font-family:Verdana;        background-color:#fffff2;    }    Table{border-collapse:collapse;border:none;background-color:#fffff0;}    TH {FONT-SIZE: 14px;font-family:Verdana;border:solid#999999 1px;}    TD {FONT-SIZE: 12px;font-family:Verdana;border:solid#888888 1px;}    TR {FONT-SIZE: 12px;font-family:Verdana;border:solid#999999 1px;}    /* 文档标题 */    .docTitle    {        border:border:1px solid aaaa00;        FONT-SIZE:24px;        width:100%;        color:#00aa00;        background-color:#fffacd;        font-weight:bold;    }    /* 目录子项 */    .contentItem    {        width:100%;        color:#0000ff;        background-color:#fffff2;        font-size:14px;        font-weight:bold;        border:solid #999999 1px    }    /* 目录 */    .contents    {        border:none;        FONT-SIZE:24px;        width:100%;        color:#000000;        background-color:#fffacd;        font-weight:bold;    }    /* 筛选 */    .sift    {        border:none;        FONT-SIZE:24px;        width:100%;        color:#000000;        background-color:#fffacd;        font-weight:bold;    }    /* 提示(说明package) */    .tips    {        border:none;        FONT-SIZE:24px;        width:70100        color:#000000;        background-color:#fffacd;        font-weight:bold;    }    /* 目录表格 */    .contentsTB    {        width:100%;    }    /* 数据包表头 */    .packageTH    {        border:2px solid #666;        font-weight:bold;        color:#000000;        background-color:#fffacd;    }    /* 数据包表格 */    .packageTB    {        width:100%;        border:1px solid #666;    }    /* 数据包行 */    .packageTR    {        background-color:#fffce5;        border:1px solid #666;    }    /* 子数据段表头 */    .subDataTH    {        border:2px solid #666;        font-weight:bold;        color:#000000;        background-color:#cdeaff;    }    /* 子数据段表格 */    .subDataTB    {        width:100%;        border:1px solid #666;    }    /* 子数据段行 */    .subDataTR    {        background-color:#e8f5ff;        border:1px solid #666;    }    /* 数组表头 */    .arrayTH    {        border:2px solid #666;        font-weight:bold;        color:#000000;        background-color:#d2fccf;    }    /* 数组表格 */    .arrayTB    {        width:100%;        border:1px solid #666;    }    /* 数组行 */    .arrayTR    {        background-color:#edfcec;        border:1px solid #666;    }    /* 根部div */    .rootDiv    {                background-color:#eeeeee;        position:relative;         width:1000px;         left:50%;         margin-left:-500px;    }    /* 描述类型的表格格子 */    #desTd    {        color:#8a1616;        font-weight:bold;    }    /* 常量名称的表格格子 */    #constTd    {        color:#0000ff;        font-weight:bold;    }  </style> </HEAD> <BODY>    <div class="rootDiv">    {$tableContent}</div> </BODY></HTML>