效果图：
方法一：
JS： (控制DIV显隐)
function imgClick(current)
{
var list = document.getElementById("top").children;
for(i=0;i<list.length;i++){
var imgName = list[i].getAttribute("bgname");
if(list[i].id == current){
jQuery("#"+list[i].id).show();
jQuery("#"+list[i].id).attr({src:"../Images/EPTab/"+imgName+"1.png"}); //点击选项卡链接的图片
jQuery("#tag"+(i+1)).show(); //显示的DIV
}else{
jQuery("#"+list[i].id).attr({src:"../Images/EPTab/"+imgName+".png"}); //其他选项卡连接的图片
jQuery("#tag"+(i+1)).hide(); //隐藏其他的DIV
}
}
}
aspx：<body style="overflow: auto;">
<div class="DialogdivBg">
<div class="DialogdivTest1">
<span class="spanStyle1">
<asp:Label runat="server" ID="LblTitle"></asp:Label></span>
</div>
</div>
<div id="top" style="padding-top: 3px; overflow: auto; width: 700px; height: 50px"
nowrap="nowrap">
<input id="Button1" type="image" class="Ep" src="../Images/EPTab/Base1.png" bgname="Base"
οnclick="imgClick('Button1')" title="企业档案基础信息" />
<input id="Button2" type="image" class="Ep" src="../Images/EPTab/Verify.png" bgname="Verify"
οnclick="imgClick('Button2')" title="企业档案审核信息" />
<input id="Button3" type="image" class="Ep" src="../Images/EPTab/Auth.png" bgname="Auth"
οnclick="imgClick('Button3')" title="企业获得权威的认可（各种权威评定等）" />
<input id="Button4" type="image" class="Ep" src="../Images/EPTab/QualAuth.png" bgname="QualAuth"
οnclick="imgClick('Button4')" title="企业获得的质量认证情况（名称，颁发机构，颁发时间）" />
<input id="Button5" type="image" class="Ep" src="../Images/EPTab/QualMana.png" bgname="QualMana"
οnclick="imgClick('Button5')" title="产品质量反馈以及质量问题的处理情况" />
<input id="Button6" type="image" class="Ep" src="../Images/EPTab/Stuff.png" bgname="Stuff"
οnclick="imgClick('Button6')" title="主要出口产品的原材料以及关键安全件监控情况" />
<input id="Button7" type="image" class="Ep" src="../Images/EPTab/Manage.png" bgname="Manage"
οnclick="imgClick('Button7')" title="企业的管理情况、质量管理情况" />
<input id="Button8" type="image" class="Ep" src="../Images/EPTab/Product.png" bgname="Product"
οnclick="imgClick('Button8')" title="主要出口产品的生产流程" />
<input id="Button9" type="image" class="Ep" src="../Images/EPTab/Technics.png" bgname="Technics"
οnclick="imgClick('Button9')" title="主要出口产品的工艺特点" />
<input id="Button10" type="image" class="Ep" src="../Images/EPTab/Test.png" bgname="Test"
οnclick="imgClick('Button10')" title="检验依据" />
<input id="Button11" type="image" class="Ep" src="../Images/EPTab/Version.png" bgname="Version"
οnclick="imgClick('Button11')" title="型式试验情况记录" />
<input id="Button12" type="image" class="Ep" src="../Images/EPTab/Damages.png" bgname="Damages"
οnclick="imgClick('Button12')" title="重大质量索赔记录" />
<input id="Button13" type="image" class="Ep" src="../Images/EPTab/Inspect.png" bgname="Inspect"
οnclick="imgClick('Button13')" title="检验流程" />
<input id="Button14" type="image" class="Ep" src="../Images/EPTab/Rectify.png" bgname="Rectify"
οnclick="imgClick('Button14')" title="企业不符合项的整改记录" />
<input id="Button15" type="image" class="Ep" src="../Images/EPTab/TestOpt.png" bgname="TestOpt"
οnclick="imgClick('Button15')" title="企业检验人员基本情况" />
<input id="Button16" type="image" class="Ep" src="../Images/EPTab/TestM.png" bgname="TestM"
οnclick="imgClick('Button16')" title="企业自有的检验仪器和设备的基本情况" />
<input id="Button17" type="image" class="Ep" src="../Images/EPTab/TestP.png" bgname="TestP"
οnclick="imgClick('Button17')" title="备案检验人员基本情况" /></div>
<form id="form1" runat="server">
<div class="Dialogdiv2">
<div id="divMsgInfo" style="z-index: 1; position: absolute; top: 280px; left: 0px;
filter: alpha(opacity=80); background: Transparent; text-align: center; display: none;">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" align="center" valign="middle" style="height: 100%">
<div style="background-color: #f2f2f2; width: 200px; height: 24px; padding-top: 4px;
border: solid 1px #00807F; background-image: url('../Images/right/loading.gif');
background-repeat: no-repeat; background-position: 15px 4px;">
<input id="lblWaitMsg" type="text" runat="server" style="background: Transparent;
margin-left: 20px; border-color: Transparent; width: 150px; border-style: none;"
readonly="readonly" value="正在准备导出数据，请稍等...">
</div>
</td>
</tr>
</table>
</div>
<div id="tag1">
<table>
<tr height="30">
<td>
<p style="letter-spacing: 2px">
<span>企业名称：</span>
</p>
</td>
<td colspan="5" align="left">
<asp:TextBox ID="txtEnterpriselName" MaxLength="50" Width="375px" runat="server"
Enabled="false">
</asp:TextBox>
<span style="padding-left: 5px">
<asp:Label runat="server" ID="Lbl1" Text="*" ToolTip="企业名称为必填项,且最多不能超过25个汉字" ForeColor="red"></asp:Label></span></td>
</tr>
<tr height="30">
<td>
商检注册号：</td>
<td colspan="2" align="left">
<asp:TextBox ID="txtRegistrationNo" Width="132px" runat="server" Enabled="false">
</asp:TextBox>
<span style="padding-left: 5px">
<asp:Label runat="server" ID="Label2" Text="*" ToolTip="商检注册号为必填项" ForeColor="red"></asp:Label></span></td>
<td>
组织机构代码：</td>
<td colspan="2" align="left">
<asp:TextBox ID="txtEnterpriseNo" Width="132px" runat="server" Enabled="false">
</asp:TextBox></td>
</tr>
<tr height="30">
<td>
<p style="letter-spacing: 2px">
<span>企业法人：</span></p>
</td>
<td colspan="2" align="left">
<asp:TextBox ID="txtLegalPerson" MaxLength="20" Width="132px" runat="server" Enabled="false">
</asp:TextBox>
<span style="padding-left: 5px">
<asp:Label runat="server" ID="Label3" Text="*" ToolTip="企业法人为必填项,且最多不能超过10个汉字" ForeColor="red"></asp:Label></span></td>
<td>
<p style="letter-spacing: 4px">
<span>注册资金：</span></p>
</td>
<td colspan="2" align="left">
<asp:TextBox ID="txtCapital" Width="132px" runat="server" MaxLength="20" Enabled="false">
</asp:TextBox>
(单位：万元) <span style="padding-left: 5px">
<asp:Label runat="server" ID="Label5" Text="*" ToolTip="注册资金为必填项,且必须为数字" ForeColor="red"></asp:Label></span></td>
</td>
</tr>
<tr height="30">
<td>
企业联系人：</td>
<td colspan="2" align="left">
<asp:TextBox ID="txtLinkMan" MaxLength="20" Width="132px" runat="server" Enabled="false">
</asp:TextBox></td>
<td>
<p style="letter-spacing: 4px">
<span>联系电话：</span></p>
</td>
<td colspan="2" align="left">
<asp:TextBox ID="txtPhone" Width="132px" runat="server" MaxLength="20" Enabled="false">
</asp:TextBox></td>
</tr>
<tr height="30">
<td>
<p style="letter-spacing: 2px">
<span>电子邮箱：</span></p>
</td>
<td colspan="2" align="left">
<asp:TextBox ID="txtEmail" runat="server" Width="132px" MaxLength="50" Enabled="false">
</asp:TextBox></td>
<td>
<p style="letter-spacing: 4px">
<span>传真：</span></p>
</td>
<td colspan="2" align="left">
<asp:TextBox ID="txtFax" Width="132px" runat="server" MaxLength="20" Enabled="false">
</asp:TextBox></td>
</tr>
<tr height="33px">
<td>
<p style="letter-spacing: 2px">
<span>
<asp:Label runat="server" ID="LblClass" Text="企业类别："></asp:Label></span></p>
</td>
<td colspan="2" align="left">
<asp:DropDownList runat="server" ID="DropClass" Width="139px" Enabled="false">
</asp:DropDownList>
<span style="padding-left: 5px">
<asp:Label runat="server" ID="Label1" Text="*" ToolTip="企业类别为必选项" ForeColor="red"></asp:Label></span>
</td>
<td>
<p style="letter-spacing: 2px" align="left">
<span>
<asp:Label runat="server" ID="LblNature" Text="企业性质："></asp:Label></span></p>
</td>
<td colspan="2" align="left">
<asp:DropDownList runat="server" ID="DropNature" Width="137px" Enabled="false">
</asp:DropDownList>
<span style="padding-left: 5px">
<asp:Label runat="server" ID="Label4" Text="*" ToolTip="企业性质为必选项" ForeColor="red"></asp:Label></span>
</td>
</tr>
<div runat="server" id="DIVEP">
<tr height="30">
<td>
<p style="letter-spacing: 2px">
<span>企业地址：</span></p>
</td>
<td colspan="2" align="left">
<asp:TextBox ID="txtEAddress" Width="132px" runat="server" MaxLength="100" Enabled="false">
</asp:TextBox></td>
<td>
<p style="letter-spacing: 2px">
<span>所属地区：</span></p>
</td>
<td colspan="2" align="left">
<asp:TextBox ID="txtRespectiveDistricts" Width="132px" runat="server" MaxLength="100"
Enabled="false">
</asp:TextBox></td>
</tr>
<tr>
<td>
<p style="letter-spacing: 2px">
<span>企业网址：</span></p>
</td>
<td colspan="2" align="left">
<asp:TextBox ID="txtEURL" Width="132px" runat="server" MaxLength="100" Enabled="false">
</asp:TextBox></td>
<td>
<asp:Label runat="server" ID="LblCreateTime" Text="档案创建日期："></asp:Label>
</td>
<td colspan="2" align="left">
<asp:TextBox ID="txtCreateTime" Width="132px" runat="server" Enabled="false">
</asp:TextBox></td>
</tr>
<tr height="50">
<td>
<p style="letter-spacing: 2px">
<span>企业概况：</span></p>
</td>
<td colspan="5" align="left">
<asp:TextBox TextMode="MultiLine" Height="40px" Width="375px" Enabled="false" ID="txtSummarize"
runat="server">
</asp:TextBox></td>
</tr>
<tr height="50">
<td>
<p style="letter-spacing: 2px">
<span>备注信息：</span></p>
</td>
<td colspan="5" align="left">
<asp:TextBox TextMode="MultiLine" Height="40px" Width="375px" ID="txtRemark" runat="server"
Enabled="false">
</asp:TextBox></td>
</tr>
</div>
<tr height="30">
<td>
</td>
<td align="left">
<asp:CheckBox runat="server" ID="IsWriteOff" Text="注销" ToolTip="选中后将该档案信息置为注销状态"
Enabled="false" />
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
<%---------------------------------------------------------------------------------------------------------------------------------%>
<div id="tag2" style="display: none; overflow: auto; height: 411px">
<table>
<tr align="left">
<td colspan="6">
<hr color="red" style="height: 1px" width="100%" />
<span style="color: #ff0000">企业档案审核信息：</span></td>
</tr>
<tr>
<td>
<asp:Label runat="server" ID="LblVerStatus" Text="档案审核状态："></asp:Label>
</td>
<td colspan="2" align="left">
<asp:TextBox ID="txtVerStatus" Width="132px" runat="server" Enabled="false">
</asp:TextBox></td>
</tr>
<tr>
<td>
<asp:Label runat="server" ID="LblVerTime" Text="档案审核日期："></asp:Label>
</td>
<td colspan="2" align="left">
<asp:TextBox ID="txtVerTime" Width="132px" runat="server" Enabled="false">
</asp:TextBox></td>
<td>
<p style="letter-spacing: 2px">
<span>
<asp:Label runat="server" ID="LblVerOpt" Text="档案审核人："></asp:Label></span></p>
</td>
<td colspan="2" align="left">
<asp:TextBox ID="txtVerOpt" Width="132px" runat="server" Enabled="false">
</asp:TextBox></td>
</tr>
<tr>
<td>
<p style="letter-spacing: 5px">
<span>
<asp:Label runat="server" ID="LblVerify" Text="档案审核："></asp:Label></span></p>
</td>
<td colspan="2" align="left">
<asp:RadioButtonList ID="RbtnVerify" runat="server" RepeatDirection="Horizontal"
Enabled="false">
<asp:ListItem Value="1" Text="通过"></asp:ListItem>
<asp:ListItem Value="2" Text="驳回"></asp:ListItem>
</asp:RadioButtonList></td>
<td>
<p style="letter-spacing: 8px">
<span>
<asp:Label runat="server" ID="LblHon" Text="诚信度："></asp:Label></span></p>
</td>
<td colspan="2" align="left">
<asp:DropDownList runat="server" ID="CheckHon" Width="137px" Enabled="false">
<asp:ListItem Value="1" Text="诚信"></asp:ListItem>
<asp:ListItem Value="0" Text="不诚信"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:Label runat="server" ID="LblVerNotion" Text="档案审核意见："></asp:Label>
</td>
<td colspan="5" align="left">
<asp:TextBox ID="txtVerNotion" TextMode="MultiLine" Height="40px" runat="server"
Enabled="false" Width="390px">
</asp:TextBox></td>
</tr>
<tr align="left">
<td colspan="6">
<hr color="red" style="height: 1px" width="100%" />
<span style="color: #ff0000">企业诚信度审核信息：</span></td>
</tr>
<tr>
<td>
<asp:Label runat="server" ID="lblHonVerStatus" Text="诚信审核状态："></asp:Label>
</td>
<td colspan="2" align="left">
<asp:TextBox ID="txtHonVerStatus" Width="132px" Enabled="false" runat="server">
</asp:TextBox></td>
<td>
</td>
<td colspan="2" align="left">
</tr>
<tr>
<td>
<asp:Label runat="server" ID="lblDateTime" Text="诚信审核日期："></asp:Label>
</td>
<td colspan="2" align="left">
<asp:TextBox ID="txtHonVerTime" Width="132px" runat="server" Enabled="false">
</asp:TextBox></td>
<td>
<p style="letter-spacing: 2px">
<span>
<asp:Label runat="server" ID="lblHonOpt" Text="诚信审核人："></asp:Label></span></p>
</td>
<td colspan="2" align="left">
<asp:TextBox ID="txtHonOpt" Enabled="false" Width="132px" runat="server">
</asp:TextBox></td>
</tr>
<tr>
<td>
<p style="letter-spacing: 2px">
<span>
<asp:Label runat="server" ID="txtHonVerify" Text="诚信度审核："></asp:Label></span></p>
</td>
<td colspan="2" align="left">
<asp:RadioButtonList ID="RbtHonVerify" runat="server" RepeatDirection="Horizontal"
Enabled="false">
<asp:ListItem Value="1" Text="通过"></asp:ListItem>
<asp:ListItem Value="2" Text="驳回"></asp:ListItem>
</asp:RadioButtonList></td>
<td>
<p style="letter-spacing: 8px">
<span>
<asp:Label runat="server" ID="lblHon2" Text="诚信度："></asp:Label></span></p>
</td>
<td colspan="2" align="left">
<asp:DropDownList runat="server" ID="DropHon" Width="137px" Enabled="false">
<asp:ListItem Value="1" Text="诚信"></asp:ListItem>
<asp:ListItem Value="0" Text="不诚信"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:Label runat="server" ID="lblHonVerNation" Text="诚信审核意见："></asp:Label>
</td>
<td colspan="5" align="left">
<asp:TextBox ID="txtHonVerNation" TextMode="MultiLine" Height="40px" runat="server"
Enabled="false" Width="390px">
</asp:TextBox></td>
</tr>
</table>
</div>
<%---------------------------------------------------------------------------------------------------------------------------------%>
<div id="tag3" style="display: none; height: 411px">
<table height="411">
<tr>
<td>
</td>
<td>
权威认证：
</td>
</tr>
<tr>
<td>
<div style="height: 350px; width: 130px; overflow: auto">
<asp:DataList ID="dlImages" runat="server" RepeatColumns="1" HorizontalAlign="Center"
RepeatDirection="Horizontal" DataKeyField="ImageUrl">
<ItemTemplate>
<table class="border1" οnmοusemοve="this.className='border2'" οnmοuseοut="this.className='border1'"
border="1" cellpadding="0" cellspacing="0" style="margin-top: 7px; cursor: hand;"
align="center">
<tr>
<td align="center">
<img alt="" src="<%# GetUrl(Eval("ImageUrl")) %>" title="<%#Eval("ImageName") %>" width="100"
οnclick="return ImageDetail('<%#Eval("EpImagesId") %>')" height="100" />
</td>
</tr>
</table>
</ItemTemplate>
<ItemStyle VerticalAlign="Top" />
</asp:DataList>
</div>
</td>
<td>
<asp:TextBox ID="txtRecognized" TextMode="MultiLine" Height="350px" runat="server"
Width="490px" Enabled="false">
</asp:TextBox>
</td>
</tr>
</table>
</div>
<%---------------------------------------------------------------------------------------------------------------------------------%>
<div id="tag4" style="display: none; height: 411px">
<table height="411">
<tr>
<td>
</td>
<td>
质量认证：
</td>
</tr>
<tr>
<td>
<div style="height: 350px; width: 130px; overflow: auto">
<asp:DataList ID="DLImage2" runat="server" RepeatColumns="1" HorizontalAlign="Center"
RepeatDirection="Horizontal" DataKeyField="ImageUrl" >
<ItemTemplate>
<table class="border1" οnmοusemοve="this.className='border2'" οnmοuseοut="this.className='border1'"
border="1" cellpadding="0" cellspacing="0" style="margin-top: 7px; cursor: hand;"
align="center">
<tr>
<td align="center">
<img alt="" src="<%# GetUrl(Eval("ImageUrl")) %>" title="<%#Eval("ImageName") %>" width="100"
οnclick="return ImageDetail('<%#Eval("EpImagesId") %>')" height="100" />
</td>
</tr>
</table>
</ItemTemplate>
<ItemStyle VerticalAlign="Top" />
</asp:DataList>
</div>
</td>
<td>
<asp:TextBox ID="txtQualityApprove" TextMode="MultiLine" Height="350px" runat="server"
Width="490px" Enabled="false">
</asp:TextBox>
</td>
</tr>
</table>
</div>
<%---------------------------------------------------------------------------------------------------------------------------------%>
<div id="tag5" style="display: none; height: 411px">
<table>
<tr>
<td>
</td>
<td>
质量反馈：
</td>
</tr>
<tr>
<td rowspan="3">
<div style="height: 350px; width: 130px; overflow: auto">
<asp:DataList ID="DLImage3" runat="server" RepeatColumns="1" HorizontalAlign="Center"
RepeatDirection="Horizontal" DataKeyField="ImageUrl">
<ItemTemplate>
<table class="border1" οnmοusemοve="this.className='border2'" οnmοuseοut="this.className='border1'"
border="1" cellpadding="0" cellspacing="0" style="margin-top: 7px; cursor: hand;"
align="center">
<tr>
<td align="center">
<img alt="" src="<%# GetUrl(Eval("ImageUrl")) %>" title="<%#Eval("ImageName") %>" width="100"
οnclick="return ImageDetail('<%#Eval("EpImagesId") %>')" height="100" />
</td>
</tr>
</table>
</ItemTemplate>
<ItemStyle VerticalAlign="Top" />
</asp:DataList>
</div>
</td>
<td>
<asp:TextBox ID="txtQualityFeedback" TextMode="MultiLine" Height="155px" runat="server"
Enabled="false" Width="490px">
</asp:TextBox>
</td>
</tr>
<tr>
<td>
质量问题处理情况：
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="txtQualityTreatment" TextMode="MultiLine" Height="160px" runat="server"
Width="490px" Enabled="false">
</asp:TextBox>
</td>
</tr>
</table>
</div>
<%---------------------------------------------------------------------------------------------------------------------------------%>
<div id="tag6" style="display: none; height: 411px">
<table>
<tr>
<td>
产品的原材料及关键安全件监控情况：
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="txtPMMonitor" TextMode="MultiLine" Height="345px" runat="server"
Enabled="false" Width="530px">
</asp:TextBox>
</td>
</tr>
</table>
</div>
<%---------------------------------------------------------------------------------------------------------------------------------%>
<div id="tag7" style="display: none; height: 411px">
<table>
<tr>
<td>
企业管理情况，尤其是质量管理情况：
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="txtManageSituation" Enabled="false" TextMode="MultiLine" Height="345px"
runat="server" Width="530px">
</asp:TextBox>
</td>
</tr>
</table>
</div>
<%---------------------------------------------------------------------------------------------------------------------------------%>
<div id="tag8" style="display: none; height: 411px">
<table>
<tr>
<td>
主要出口产品的生产流程：
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="txtProductionFlow" TextMode="MultiLine" Height="345px" runat="server"
Enabled="false" Width="530px">
</asp:TextBox>
</td>
</tr>
</table>
</div>
<%---------------------------------------------------------------------------------------------------------------------------------%>
<div id="tag9" style="display: none; height: 411px">
<table>
<tr>
<td>
主要产品的工艺特点：
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="txtTechnologyCharacteristics" TextMode="MultiLine" Height="345px"
Enabled="false" runat="server" Width="530px">
</asp:TextBox>
</td>
</tr>
</table>
</div>
<%---------------------------------------------------------------------------------------------------------------------------------%>
<div id="tag10" style="display: none; height: 411px">
<table height="411">
<tr>
<td>
</td>
<td>
检验依据：
</td>
</tr>
<tr>
<td>
<div style="height: 350px; width: 130px; overflow: auto">
<asp:DataList ID="DLImage4" runat="server" RepeatColumns="1" HorizontalAlign="Center"
RepeatDirection="Horizontal" DataKeyField="ImageUrl">
<ItemTemplate>
<table class="border1" οnmοusemοve="this.className='border2'" οnmοuseοut="this.className='border1'"
border="1" cellpadding="0" cellspacing="0" style="margin-top: 7px; cursor: hand;"
align="center">
<tr>
<td align="center">
<img alt="" src="<%# GetUrl(Eval("ImageUrl")) %>" title="<%#Eval("ImageName") %>" width="100"
οnclick="return ImageDetail('<%#Eval("EpImagesId") %>')" height="100" />
</td>
</tr>
</table>
</ItemTemplate>
<ItemStyle VerticalAlign="Top" />
</asp:DataList>
</div>
</td>
<td>
<asp:TextBox ID="txtTestBasis" TextMode="MultiLine" Height="350px" runat="server"
Width="490px" Enabled="false">
</asp:TextBox>
</td>
</tr>
</table>
</div>
<%---------------------------------------------------------------------------------------------------------------------------------%>
<div id="tag11" style="display: none; height: 411px">
<table>
<tr>
<td>
型式试验情况记录：
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="txtCaseRecords" TextMode="MultiLine" Height="345px" runat="server"
Enabled="false" Width="530px">
</asp:TextBox>
</td>
</tr>
</table>
</div>
<%---------------------------------------------------------------------------------------------------------------------------------%>
<div id="tag12" style="display: none; height: 411px">
<table>
<tr>
<td>
重大质量索赔记录：
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="txtClaimsRecords" TextMode="MultiLine" Height="345px" runat="server"
Enabled="false" Width="530px">
%2
150
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
