JqueryTable 选项卡

aspx，Html css代码：

<%@ Page Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true"
    Codebehind="DiseaseOjbectEdit.aspx.cs" Inherits="SubjectManager.Disease.DiseaseOjbectEdit"
    Title="疾病专题管理" %>

<%@ Register Src="../Uc/Skin.ascx" TagName="Skin" TagPrefix="uc2" %>
<%@ Register Src="../Uc/FastColumn.ascx" TagName="FastColumn" TagPrefix="uc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeaderPlaceHolder1" runat="server">
    <link href="../Css/css.css" type="text/css" rel="stylesheet" />
    <style type="text/css">
    * { margin:0; padding:0;}
    body { font:12px Verdana, Geneva, sans-serif; color:#404040;} 
   .tabs { margin:10px 0 0 20px;  position:relative;  height:1%; height:900px;}
   .tabs h3 
   { 
      z-index:2;
      font-size:12px; 
      background:url(../pic/pic.jpg) ; 
      150px; 
      height:25px; 
      line-height:25px; 
      text-align:center; 
      float:left; 
      margin-right:5px;
   }
   h3.active { background-position:0 -25px; color:#fff;}
   #tab-01, #tab-02
   { 
      position:absolute; 
      top:24px; 
      left:0; 
      padding:10px; 
      height:70%; 
      border:1px solid #ace; 
      z-index:1;
      80%;
   }
   #tab-02 { display:none;}
   .mytable{
    border-collapse: collapse;/*是否合并边框*/
    table-layout : fixed;/**/
    100%;
    height="30";
    cellSpacing="1";
    cellPadding="2";
    text-align="center";
    background-color="#ffffff";
    border="1";
	borderColorLight="#cadfe5";
	borderColor="#f2f8f9"
    }
    .mytable th{
    border:1px solid #cccccc;
    /*background-color:#eeeeee;*/
    font: bold 11px "Trebuchet MS" , Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    border-left: 1px solid #000000;
    border-top: 1px solid #000000;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    padding: 2px 2px 2px 2px;
    background: no-repeat;
    }
    .mytable td{
    border:1px solid #cccccc;   
    padding:10px;
    }
    .mytable td span input {
     border-right:0px;
     border-bottom:1px solid #000;
     border-left:0px;
     border-top:0px;
     background:#fff;
     padding:2px 2px 2px 2px;
     color:#000;
    }
    .mytable caption{
    border:1px solid #cccccc;
    text-align:left;
    padding:10px;
    }
    .NoNewline
    {
        word-break: keep-all; /*必须*/
    }
    .divControl{
    /*存放按钮等控件*/
    border-collapse: collapse;/*是否合并边框*/
    table-layout : fixed;/**/
    100%;
    height="30";
    cellSpacing="1";
    cellPadding="0";
    text-align="center";
    background-color="#bed6e0";
    border="0"
    }
    .left{
     80px;
    }
    .right
    {
     text-align:left;
     80%;
    }
    .title
    {
    	45%;
        background:#eee;
        font-size: 16px;
        padding: 2px 2px 2px 2px;
        color: #000000;
        text-align:center;
    }
  </style>

    <script language="javascript" type="text/javascript">
    <!--
      $(document).ready(function() {
	    $('.tabs h3').click(function() {
		    $('.tabs div').hide();
		    $(this).siblings('h3').removeClass('active').end()
					      .addClass('active').next('div').show();
	    });
        });
        
        function GetFocus(stridone ,stridtwo)
		{
		  $("#tab-02").show();
		  $("#tab-01").hide();		  	   
		}
		
		//change tr color.
		 var currentColor="";
         function changeHangColor(objTR)
         {
            currentColor = $(objTR).children("td").attr("bgColor");
            
            $(objTR).children("td").each(
              function(i)
              {
                $(objTR).children("td").eq(i).attr("bgColor","#e8eefa");
              }
            )
                    
         }
         function changeHangColor2(objTR)
         {
         
            $(objTR).children("td").each(
              function(i)
              {
                $(objTR).children("td").eq(i).attr("bgColor","#FFFFFF");
              }
            )
         }
         
         //删除操作         
        function chooseAll(SourceID)
        {
            var sourceBox=document.getElementById(SourceID);
            var obj = document.getElementsByTagName('input');
            for(var i=0,b;b=obj[i];i++)
            {
               if(b.type == 'checkbox')
               {
               
                 b.checked =sourceBox.checked;      
 
               }           
            }        
         }
          //--------------
         
          function checkAllDel()
         {
            var checkvalue=0;
            
            var obj = document.getElementsByTagName('input');
            for(var i=0,b;b=obj[i];i++)
            {
               if(b.type == 'checkbox')
               {                 
                 if( b.checked ==true )
                   checkvalue++;         
 
               }            
            }        
         
            if(checkvalue==0)
            {
              alert("请选择！");
              return false;
              
            }
            if(window.confirm("确定删除所选项吗？")) 
            {
              return true;
            }
            else
            {
              return false;
            }      
          
         
         }
         
     
        function delall(){
          //---确认删除 JQUERY Method.
          var vv = $(".p3 input");  
            var b = false;
            for(var i = 0; i < vv.length; i++)
                if(vv[i].checked)
                    b = true;
             
            if(!b)
            {
                alert("请选择要删除的数据!");
                return false;
            }
            return window.confirm("确认删除?");
        }
        function CheckGo()
        {
            if(window.event.keyCode == '13')
            {
               $("#<%=TxtColumnName.ClientID %>").click();
                event.keyCode=0;
                event.returnValue=false;
            } 
        }
        //-->
        
            function checktxtDiseaseName()
			{
			    if(document.getElementById("<%=txtDiseaseName.ClientID%>").value == "")
			    {
			        alert("请输入疾病名称!");
			        document.getElementById("<%=txtDiseaseName.ClientID%>").focus();
			        return false;
			    }
			}
			function checktxtSubName()
			{
			    
			    if(document.getElementById("<%=txtSubName.ClientID%>").value == "")
			    {
			        alert("请输入专题名称!");
			        document.getElementById("<%=txtSubName.ClientID%>").focus();
			        return false;
			    }
			}
			
			 
			 function checktxtConDrugs()
			 {
			    if(document.getElementById("<%=txtConDrugs.ClientID %>").value == "")
			    {
			        alert("请输入相关药物!");
			        document.getElementById("txtConDrugs").focus();
			        return false;
			    }
			 } 
			 
			 function checkddl()
			{
			    if(document.getElementById("<%=ddlKnowledge.ClientID %>").value == "-1")
			    {
			        alert("请选择学科!");
			        return false;
			    }
			 
			    if(document.getElementById("SkinTop_DropSkin").value == "--请选择--" )
			    {
			        alert("请选择页头地址!");
			        return false;
			    }
			
			     if(document.getElementById("SkinBottom_DropSkin").value == "--请选择--" )
			    {
			        alert("请选择页尾地址!");
			        return false;
			    }
			 
			    if(document.getElementById("SkinTemplate_DropSkin.ClientID").value == "--请选择--")
			    {
			        alert("请选择模板地址!");
			        return false;
			    }
			}
    </script>

    <script src="../Js/jquery-1.4.2.min.js" type="text/javascript"></script>

    <script src="../Js/thickbox.js" type="text/javascript"></script>

    <link href="../Css/css.css" type="text/css" rel="stylesheet" />
    <link href="../Css/thickbox.css" type="text/css" rel="stylesheet" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <!-- 列表 -->
    <table cellspacing="0" cellpadding="0" width="100%" border="0">
        <tr>
            <td align="center" width="3%" height="30">
                 </td>
            <td class="a1">
                <img height="11" src="../images/icon.gif" width="11" align="middle" />  您现在的位置
                >> <a class="a1" href="../workaround.aspx" target="workaroundFrame">系统主页</a>
                >>专题信息</td>
        </tr>
    </table>
    <!--操作区 -->
    <div class="tabs">
        <!-- 默认第一个tab为激活状态 --> 
        <h3 id="One" class="active" onclick='javascript:window.location.reload();'>
            <span >疾病专题内容管理</span></h3>
        <div id="tab-01">
            <table id="mytableOne" class="mytable" background="../images/searchbg.gif">
                <tr>
                    <td colspan="4" class="title" height="30px" align="center">
                        专题详细信息表单</td>
                </tr>
                <tr>
                    <td align="right">
                        专题名称：
                    </td>
                    <td class="right">                        
                            <span><asp:TextBox ID="txtSubName" runat="server" onmouseout="checktxtSubName();"></asp:TextBox></span><font color="red">*</font>
                    </td>
                    <td align="right">
                        疾病名称：</td>
                    <td class="right">
                        <span><asp:TextBox ID="txtDiseaseName" runat="server" onmouseout="checktxtDiseaseName();"></asp:TextBox></span><font color="red">*</font>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        所属学科：
                    </td>
                    <td class="right">
                        <asp:DropDownList ID="ddlKnowledge" runat="server">
                        </asp:DropDownList><font color="red">*</font>
                    </td>
                    <td align="right">
                        相关药物：
                    </td>
                    <td class="right">
                            <span><asp:TextBox ID="txtConDrugs" runat="server" onmouseout="checktxtConDrugs();"></asp:TextBox></span><font color="red">*</font>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        导航栏目：
                    </td>
                    <td class="right" colspan="3">
                            <asp:TextBox ID="txtNavigation" runat="server" Visible="false"></asp:TextBox>
                            <fck:FCKeditor ID="fckNavigation" runat="server" Height="300px" Visible="true">
                            </fck:FCKeditor>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        页头引用：
                    </td>
                    <td class="right" colspan="3">
                        <uc2:Skin ID="SkinTop" runat="server" SkinType="Top" /><font color="red">*</font>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        页尾引用：
                    </td>
                    <td class="right" colspan="3">
                        <uc2:Skin ID="SkinBottom" runat="server" SkinType="Bottom" /><font color="red">*</font>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        专题模块：</td>
                    <td class="right" colspan="3">
                        <uc2:Skin ID="SkinTemplate" runat="server" SkinType="Main" /><font color="red">*</font>
                    </td>
                </tr>
                <tr visible="false" style="display: none;">
                    <td align="right" valign="top">
                        上传图片：</td>
                    <td class="right" colspan="3">
                        <am:AttachmentManage ID="AttachmentManageImage" runat="server" AttType="Image" />
                    </td>
                </tr>
                <tr>
                    <td colspan="4" align="center">
                        <asp:Button ID="btnUpdate" runat="server" Text="修改专题" OnClick="btnUpdate_Click" OnClientClick="checkddl()();" />
                           
                        <input id="btnClose" name="btnClose" type="button" value="取  消" onclick="javascript:window.location.href='SubjectList.aspx'" /> 
                         
                        <asp:Button ID="btnAddNewCol" runat="server" Text="添加栏目" OnClick="btnAddNewCol_Click" />
                    </td>
                </tr>
            </table>
        </div>
        <h3 id="Two">
            <span>疾病栏目内容管理</span></h3>
        <div id="tab-02">
            <table class="mytable">
                <tr>
                    <td class="title" height="30px">
                        栏目详细信息</td>
                </tr>
            </table>
            <table border="0" cellspacing="1" cellpadding="0" width="100%" bgcolor="#bed6e0"
                align="center" height="30">
                <tr>
                    <td valign="middle" background="../images/searchbg.gif" align="center">
                        栏目名称: 
                        <asp:TextBox ID="TxtColumnName" runat="server"></asp:TextBox>   <asp:ImageButton
                            ID="imgBtnSearch" runat="server" ImageUrl="../images/btn3.gif" OnClientClick="CheckGo();"
                            OnClick="imgBtnSearch_Click"></asp:ImageButton>
                    </td>
                </tr>
            </table>
            <table cellspacing="0" cellpadding="0" width="100%" border="0">
                <tr height="5">
                    <td height="5">
                        <font face="宋体"></font>
                    </td>
                </tr>
            </table>
            <table id="mytableTwo" class="p3" bordercolor="#f2f8f9" cellspacing="1" cellpadding="2"
                width="100%" align="center" bgcolor="#ffffff" bordercolorlight="#cadfe5" border="1">
                <tr>
                    <td class="NoNewline" align="center" bgcolor="#cadfe5" height="18">
                        选择</td>
                    <td class="NoNewline" align="center" bgcolor="#cadfe5" height="18">
                        栏目编号</td>
                    <td class="NoNewline" align="center" bgcolor="#cadfe5" height="18">
                        栏目名称</td>
                    <td class="NoNewline" align="center" bgcolor="#cadfe5" height="18">
                        所属板块</td>
                    <td class="NoNewline" align="center" bgcolor="#cadfe5" height="18">
                        修改</td>
                    <td class="NoNewline" align="center" bgcolor="#cadfe5" height="18">
                        删除</td>
                </tr>
                <asp:Repeater ID="repData" runat="server">
                    <ItemTemplate>
                        <tr onmouseover="javascript:changeHangColor(this)" onmouseout="javascript:changeHangColor2(this)">
                            <td width="35px" height="20px" align="center" bgcolor="white">
                                <asp:CheckBox ID="choose" runat="server" />
                                <input id="HiddenID" type="hidden" value='<%#Eval("ColumnID") %>' runat="server"
                                    name="HiddenID">
                            </td>
                            <td height="20" align="left" bgcolor="white">
                                <%#Eval("ColumnID")%>
                            </td>
                            <td height="20" align="left" bgcolor="white">
                                <%#Eval("ColumnName")%>
                            </td>
                            <td height="20" align="center" bgcolor="white">
                                <%#Eval("CaseName")%>
                            </td>
                            <td height="20" align="center" bgcolor="white">
                                <a href="DiseaseColumnEidt.aspx?ColumnID=<%# Eval("ColumnID") %>&height=600&width=850&TB_iframe=true&TB_iniframe=true&modal=true"
                                    class="thickbox">
                                    <img style="border: 0" src="../pic/edit.gif" alt="编辑" /></a>
                            </td>
                            <td height="20" align="center" bgcolor="white">
                                <asp:LinkButton ID="lbtDel" runat="server" CommandName="Del" CommandArgument='<%#Eval("ColumnID") %>'
                                    OnClientClick='javascript:return confirm("您确定要删除吗?");' OnCommand="update_Command"><img style="border:0"  src="../pic/delete.gif" alt="删除" /></asp:LinkButton>
                            </td>
                        </tr>
                    </ItemTemplate>
                    <AlternatingItemTemplate>
                        <tr onmouseover="javascript:changeHangColor(this)" onmouseout="javascript:changeHangColor2(this)">
                            <td width="35px" height="20px" align="center" bgcolor="white">
                                <asp:CheckBox ID="choose" runat="server" />
                                <input id="HiddenID" type="hidden" value='<%#Eval("ColumnID") %>' runat="server"
                                    name="HiddenID" />
                            </td>
                            <td height="20" align="left" bgcolor="white">
                                <%#Eval("ColumnID")%>
                            </td>
                            <td height="20" align="left" bgcolor="white">
                                <%#Eval("ColumnName")%>
                            </td>
                            <td height="20" align="center" bgcolor="white">
                                <%#Eval("CaseName")%>
                            </td>
                            <td height="20" align="center" bgcolor="white">
                                <a href="DiseaseColumnEidt.aspx?ColumnID=<%# Eval("ColumnID") %>&height=600&width=850&TB_iframe=true&TB_iniframe=true&modal=true"
                                    class="thickbox">
                                    <img style="border: 0" src="../pic/edit.gif" alt="编辑" /></a>
                            </td>
                            <td height="20" align="center" bgcolor="white">
                                <asp:LinkButton ID="lbtDel" runat="server" CommandName="Del" CommandArgument='<%#Eval("ColumnID") %>'
                                    OnClientClick='javascript:return confirm("您确定要删除吗?");' OnCommand="update_Command"><img  style="border:0"   src="../pic/delete.gif" alt="删除" /></asp:LinkButton>
                            </td>
                        </tr>
                    </AlternatingItemTemplate>
                </asp:Repeater>
            </table>
            <%=Notice%>
            <table id="tabBottom" runat="server" border="0" cellspacing="0" cellpadding="0" height="47px"
                width="100%">
                <tr>
                    <td align="Left" class="p9" style=" 20%; height: 20px" valign="bottom">
                           <input id="chkAllInBox" type="checkbox" name="checkbox22" value="checkbox"
                            onclick="chooseAll('chkAllInBox');"> <font color="black">全选</font> 
                        <asp:ImageButton ID="imgBtnDel" runat="server" ImageUrl="../images/btn8.gif" OnClientClick="javascript:return checkAllDel();"
                            OnClick="imgBtnDel_Click"></asp:ImageButton>   
                        <asp:ImageButton ID="imgBtnAdd" runat="server" ImageUrl="../images/btn36.gif" OnClick="imgBtnAdd_Click">
                        </asp:ImageButton>
                        <font face="宋体">
                    </td>
                    <td valign="bottom" align="right" width="98%">
                        共有 
                        <asp:Label ID="LabNum1" runat="server" ForeColor="Red"></asp:Label> 个疾病栏目 
                        <asp:LinkButton ID="LinkFirst1" runat="server" OnClick="LinkFirst1_Click">首页</asp:LinkButton> 
                        <asp:LinkButton ID="LinkPrev1" runat="server" OnClick="LinkPrev1_Click">上一页</asp:LinkButton> 
                        <asp:LinkButton ID="LinkNext1" runat="server" OnClick="LinkNext1_Click">下一页</asp:LinkButton> 
                        <asp:LinkButton ID="LinkEnd1" runat="server" OnClick="LinkEnd1_Click">尾页</asp:LinkButton> 页次：
                        <asp:Label ID="LabelPageSow1" runat="server"></asp:Label>页 
                        <asp:TextBox ID="txtNum" runat="server" Columns="2"></asp:TextBox>
                        个疾病栏目/页 转到第
                        <asp:TextBox ID="TextIndex1" runat="server" Columns="2"></asp:TextBox>  页
                        <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="../images/btn2.gif" OnClick="ImageButton1_Click">
                        </asp:ImageButton> </td>
                    <td width="2%">
                         </td>
                </tr>
            </table>
        </div>
    </div>
    <input id="HiddenIndex" type="hidden" name="Hidden1" runat="server" /><input id="HiddenRecordCount"
        type="hidden" name="Hidden1" runat="server" />
</asp:Content>
图形效果：