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

 
   JiangHuMeng Game Network Communication Decoder Instruction 
  
  
  
  
  
  
    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();
				});
        }
    }
  
  
    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;
    }
  
 

 
    

	    {$tableContent}