当我从朋友处获取此代码时,我想在tab2或tab3中的索引更改中选择时保留。一切都工作正常,但在适当的选项卡上突出显示不是。请帮忙
的jQuery
$(document).ready(function () { // Hide div 2,3 by default $('#div_2').hide(); $('#div_3').hide(); $('#div_6').hide(); $('#link_3').click(function () { $('#link_3').css({ "color": "white", "background-color": "#2E8B57" }); $('#link_1').css({ "color": "#6f6f6f", "background-color": "#eeeeee" }); $('#link_2').css({ "color": "#6f6f6f", "background-color": "#eeeeee" }); //$('#div_1').hide(); //$('#div_2').hide(); //$('#div_3').show(); div3_show(); }); $('#link_2').click(function () { $('#link_2').css({ "color": "white", "background-color": "#2E8B57" }); $('#link_1').css({ "color": "#6f6f6f", "background-color": "#eeeeee" }); $('#link_3').css({ "color": "#6f6f6f", "background-color": "#eeeeee" }); //$('#div_1').hide(); //$('#div_3').hide(); //$('#div_2').show(); div2_show(); }); $('#link_1').click(function () { $('#link_1').css({ "color": "white", "background-color": "#2E8B57" }); $('#link_2').css({ "color": "#6f6f6f", "background-color": "#eeeeee" }); $('#link_3').css({ "color": "#6f6f6f", "background-color": "#eeeeee" }); //$('#div_2').hide(); //$('#div_3').hide(); //$('#div_1').show(); div1_show(); }); $('#link_5').click(function () { $('#link_5').css({ "color": "white", "background-color": "#2E8B57" }); $('#link_6').css({ "color": "#6f6f6f", "background-color": "#eeeeee" }); $('#div_6').hide(); $('#div_5').show(); }); $('#link_6').click(function () { $('#link_6').css({ "color": "white", "background-color": "#2E8B57" }); $('#link_5').css({ "color": "#6f6f6f", "background-color": "#eeeeee" }); $('#div_5').hide(); $('#div_6').show(); }); }); function div1_show() { $('#div_2').hide(); $('#div_3').hide(); $('#div_1').show(); } function div2_show() { $('#div_1').hide(); $('#div_3').hide(); $('#div_2').show(); } function div3_show() { $('#div_1').hide(); $('#div_2').hide(); $('#div_3').show(); } $(function () { $("#panel_db").tabs(); var currTab = $("#<%= HFCurrTabIndex.ClientID %>").val(); $("#panel_db").tabs({ selected: currTab }); }); $(function () { $("#panel_file").tabs(); var currTab = $("#<%= HiddenField1.ClientID %>").val(); $("#panel_file").tabs({ selected: currTab }); });
ASP.Net
<body style="width:99%; height: 606px;" >
<form id="form1" runat="server">
<asp:Panel width="100%" Height="15%" runat="server" >
<img src="Images/Title.png" width="100%" style="height: 83px" />
</asp:Panel>
<table style="width:100%; height: 132px; margin-top: 2px;">
<tr>
<td style="width:25%">
<asp:Panel runat="server" height="132px" BorderWidth="1px" BorderStyle="Dotted"> Drag From Here
</asp:Panel>
</td>
<td style="width:75%">
<asp:Panel runat="server" height="132px" BorderWidth="1px" BorderStyle="Dotted" >
<table >
<tr>
<td>
<asp:Button ID="DB" runat="server" Height="21px" OnClick="DB_Click" Text="DB" Width="55px" />
</td>
</tr>
<tr>
<td>
<asp:Button ID="Job" runat="server" Text="Job" OnClick="Job_Click" Width="55px" Height="21px"/>
</td>
</tr>
<tr>
<td>
<asp:Button ID="File" runat="server" Text="File" OnClick="File_Click" Width="55px" Height="21px"/>
</td>
</tr>
</table>
</asp:Panel>
</td></tr></table>
<asp:HiddenField runat="server" ID="HFCurrTabIndex" />
<asp:Panel runat="server" ID="panel_db" Height="100%" width="100%" BorderWidth="1px" BorderStyle="Dotted" Visible="False">
<ul id="datalist">
<li><a href="#div_1" id="link_1" >Data Connectors</a></li>
<li><a <%--class="active"--%> href="#div_2" id="link_2">Meta Data Validation</a></li>
<li><a <%--class="active" --%>href="#div_3" id="link_3">Data Set Up</a></li>
</ul>
<div id="div_1">
</div>
<div id="div_2">
<table style="height: 244px; width: 910px">
<tr>
</tr>
<tr>
<td class="auto-style52"></td>
<td class="auto-style85">
<asp:Label ID="MetaData_Validation" runat="server" Text="Meta Data Validation Required:"></asp:Label>
</td>
<td class="auto-style54">
<asp:DropDownList ID="DD_MetaData" OnSelectedIndexChanged="DL_MetaData_Validation" AutoPostBack="true" runat="server" Height="23px" Width="77px">
<asp:ListItem>--Select--</asp:ListItem>
<asp:ListItem>No</asp:ListItem>
<asp:ListItem>Yes</asp:ListItem>
</asp:DropDownList>
</td>
<td class="auto-style68"></td>
<td class="auto-style58"></td>
<td class="auto-style97"></td>
</tr>
<tr>
<td class="auto-style148">
</td>
<td class="auto-style149">
<asp:Label ID="MetaData_File" runat="server" Text="Metadata File Location:" Visible="False"></asp:Label>
</td>
<td class="auto-style150">
<asp:FileUpload ID="FUpload_Metadata" runat="server" Visible="False" />
</td>
<%--<td class="auto-style151">
</td>--%>
<td class="auto-style152">
<asp:Button ID="Btn_Meta_Upload" runat="server" BackColor="SeaGreen" Font-Bold="True" Font-Names="Times New Roman" Font-Size="Medium" ForeColor="White" Text="Upload" Visible="False" Width="76px" />
</td>
<td class="auto-style153">
<asp:Button ID="Btn_Meta_Download" runat="server" BackColor="SeaGreen" Font-Bold="True" Font-Names="Times New Roman" Font-Size="Medium" ForeColor="White" Text="Download Template" Visible="False" Width="160px" />
</td>
<td class="auto-style154"></td>
<td class="auto-style155"></td>
</tr>
<tr>
<td class="auto-style27">
<asp:Button ID="Btn_Meta_Set" runat="server" BackColor="SeaGreen" Font-Bold="True" Font-Names="Times New Roman" Font-Size="Medium" ForeColor="White" Text="Set" Width="72px" OnClick="Btn_Meta_Set_Click" />
</td>
<td class="auto-style79">
<asp:Button ID="Btn_Meta_Reset" runat="server" BackColor="SeaGreen" Font-Bold="True" Font-Names="Times New Roman" Font-Size="Medium" ForeColor="White" Text="Reset" Width="66px" />
</td>
</tr>
</table>
</div>
<div id="div_3">
<table style="height: 244px; width: 910px">
<tr>
</tr>
<tr>
<td class="auto-style52"></td>
<td class="auto-style127">
<asp:Label ID="Data_Setup" runat="server" Text="Data Set Up Required:"></asp:Label>
</td>
<td class="auto-style176">
<asp:DropDownList ID="DD_DataSetup1" runat="server" OnSelectedIndexChanged="DL_DataSetup" AutoPostBack="true" Height="23px" Width="77px">
<asp:ListItem>Select</asp:ListItem>
<asp:ListItem>No</asp:ListItem>
<asp:ListItem>Yes</asp:ListItem>
</asp:DropDownList>
</td>
<td class="auto-style56">
<asp:Label ID="Data_Validation" runat="server" Text="Data Validation Required:"></asp:Label>
</td>
<td class="auto-style63">
<asp:DropDownList ID="DD_DataSetup2" runat="server" OnSelectedIndexChanged="DL_DataValidation" AutoPostBack="true" Height="23px" Width="63px">
<asp:ListItem>Select</asp:ListItem>
<asp:ListItem>No</asp:ListItem>
<asp:ListItem>Yes</asp:ListItem>
</asp:DropDownList>
</td>
<td class="auto-style107"></td>
<td class="auto-style58"></td>
<td class="auto-style75"></td>
</tr>
<tr>
<td class="auto-style126">
<asp:Label ID="DataSheet_Validation" runat="server" Text="Data Sheet For Validation:" Visible="False"></asp:Label>
</td>
<td class="auto-style173">
<asp:FileUpload ID="FUpload_DV" runat="server" Visible="False" />
</td>
<td class="auto-style171">
<asp:Button ID="Btn_DV_Upload" runat="server" BackColor="SeaGreen" Font-Bold="True" Font-Names="Times New Roman" Font-Size="Medium" ForeColor="White" Text="Upload" Width="76px" Visible="False" />
</td>
<td class="auto-style106">
<asp:Button ID="Button_DV_Dwnload" runat="server" BackColor="SeaGreen" Font-Bold="True" Font-Names="Times New Roman" Font-Size="Medium" ForeColor="White" Text="Download Template" Width="160px" Visible="False" />
</td>
<td class="auto-style25"> </td>
<td class="auto-style78"> </td>
</tr>
<tr>
<td class="auto-style87"></td>
<td class="auto-style128">
<asp:Label ID="Query_File" runat="server" Text="Query File:" Visible="False"></asp:Label>
</td>
<td class="auto-style175">
<asp:FileUpload ID="FUpload_QFile" runat="server" Visible="False" />
</td>
<td class="auto-style91">
<asp:Button ID="Btn_Qfile_Upload" runat="server" BackColor="SeaGreen" Font-Bold="True" Font-Names="Times New Roman" Font-Size="Medium" ForeColor="White" Text="Upload" Width="76px" Visible="False" />
</td>
<td class="auto-style108">
<asp:Button ID="Btn_Qfile_Dwnload" runat="server" BackColor="SeaGreen" Font-Bold="True" Font-Names="Times New Roman" Font-Size="Medium" ForeColor="White" Text="Download Template" Width="160px" Visible="False" />
</td>
<td class="auto-style93"></td>
<td class="auto-style94"></td>
</tr>
<tr>
<td class="auto-style14"> </td>
<td class="auto-style126">
<asp:Label ID="DataSheet_Input" runat="server" Text="Data Sheet For Input:" Visible="False"></asp:Label>
</td>
<td class="auto-style173">
<asp:FileUpload ID="FUpload_DInput" runat="server" Visible="False" />
</td>
<td class="auto-style171">
<asp:Button ID="Btn_DInput_Upload" runat="server" BackColor="SeaGreen" Font-Bold="True" Font-Names="Times New Roman" Font-Size="Medium" ForeColor="White" Text="Upload" Width="76px" Visible="False" />
</td>
<td class="auto-style106">
<asp:Button ID="Btn_DInput_Dwnload" runat="server" BackColor="SeaGreen" Font-Bold="True" Font-Names="Times New Roman" Font-Size="Medium" ForeColor="White" Text="Download Template" Width="160px" Visible="False" />
</td>
<td class="auto-style25"> </td>
<td class="auto-style78"> </td>
</tr>
<tr>
<td class="auto-style14"> </td>
<td class="auto-style126">
<asp:Label ID="DataSheet_Deletion" runat="server" Text="Data Sheet For Deletion:" Visible="False"></asp:Label>
</td>
<td class="auto-style173">
<asp:FileUpload ID="FUpload_DDelete" runat="server" Visible="False" />
</td>
<td class="auto-style171">
<asp:Button ID="Btn_DDelete_Upload" runat="server" BackColor="SeaGreen" Font-Bold="True" Font-Names="Times New Roman" Font-Size="Medium" ForeColor="White" Text="Upload" Width="76px" Visible="False" />
</td>
<td class="auto-style106">
<asp:Button ID="Btn_DDelete_Dwnload" runat="server" BackColor="SeaGreen" Font-Bold="True" Font-Names="Times New Roman" Font-Size="Medium" ForeColor="White" Text="Download Template" Width="160px" Visible="False" />
</td>
</tr>
<tr>
<td class="auto-style27">
<asp:Button ID="Btn_Data_Set" runat="server" BackColor="SeaGreen" Font-Bold="True" Font-Names="Times New Roman" Font-Size="Medium" ForeColor="White" Text="Set" Width="72px" OnClick="Btn_Data_Set_Click" />
</td>
<td class="auto-style79">
<asp:Button ID="Btn_Data_Reset" runat="server" BackColor="SeaGreen" Font-Bold="True" Font-Names="Times New Roman" Font-Size="Medium" ForeColor="White" Text="Reset" Width="66px" />
</td>
</tr>
</table>
</div>
</asp:Panel>
<asp:Panel runat="server" ID="panel_job" Height="108%" width="100%" BorderWidth="1px" BorderStyle="Dotted" Visible="false">
<ul>
<li><a class="active" href="#" id="link_4" >Job Details</a></li>
</ul>
<div id="div_4">
<table style="height: 244px; width: 910px">
<tr>
<td class="auto-style14">
</td>
<td class="auto-style1"> </td>
</tr>
<tr>
<td class="auto-style87"></td>
<td class="auto-style88">
<asp:Label ID="Job_Name" runat="server" Text="Job Name:"></asp:Label>
</td>
<td class="auto-style89">
<asp:TextBox ID="TextBox5" runat="server" Height="20px" Width="175px"></asp:TextBox>
</td>
</tr>
<tr>
<td class="auto-style14"> </td>
<td class="auto-style1">
<asp:Label ID="Job_Path" runat="server" Text="Job Path(.ksh):"></asp:Label>
</td>
<td class="auto-style61">
<asp:TextBox ID="TextBox14" runat="server" Height="20px" Width="175px"></asp:TextBox>
</td>
<td class="auto-style25"> </td>
<td class="auto-style78"> </td>
</tr>
<tr>
<td class="auto-style14"> </td>
<td class="auto-style1">
<asp:Label ID="Schedule_ID" runat="server" Text="Schedule ID:"></asp:Label>
</td>
<td class="auto-style61">
<asp:TextBox ID="TextBox15" runat="server" Height="20px" Width="175px"></asp:TextBox>
</td>
<td class="auto-style25"> </td>
<td class="auto-style78"> </td>
</tr>
<tr>
<td class="auto-style14"> </td>
<td class="auto-style1">
<asp:Label ID="Label21" runat="server" Text="Period Date:"></asp:Label>
</td>
<td class="auto-style61">
<asp:TextBox ID="Period_Date" runat="server" Height="20px" Width="175px"></asp:TextBox>
</td>
<td class="auto-style25"> </td>
<td class="auto-style78"> </td>
</tr>
<tr>
<td class="auto-style14"> </td>
<td class="auto-style1">
<asp:Label ID="Env_File" runat="server" Text="Env File:"></asp:Label>
</td>
<td class="auto-style61">
<asp:FileUpload ID="FUpload_EnvFile" runat="server" />
</td>
<td class="auto-style83">
<asp:Button ID="Btn_Env_Upload" runat="server" BackColor="SeaGreen" Font-Bold="True" Font-Names="Times New Roman" Font-Size="Medium" ForeColor="White" Text="Upload" Width="76px" />
</td>
<td class="auto-style80">
<asp:Button ID="Btn_Env_Dwnload" runat="server" BackColor="SeaGreen" Font-Bold="True" Font-Names="Times New Roman" Font-Size="Medium" ForeColor="White" Text="Download Template" Width="160px" />
</td>
<td class="auto-style25"> </td>
<td class="auto-style78"> </td>
</tr>
<tr>
<td class="auto-style27">
<asp:Button ID="Btn_Job_Set" runat="server" BackColor="SeaGreen" Font-Bold="True" Font-Names="Times New Roman" Font-Size="Medium" ForeColor="White" Text="Set" Width="72px" OnClick="Btn_Job_Set_Click" />
</td>
<td class="auto-style79">
<asp:Button ID="Btn_Job_Reset" runat="server" BackColor="SeaGreen" Font-Bold="True" Font-Names="Times New Roman" Font-Size="Medium" ForeColor="White" Text="Reset" Width="66px" />
</td>
</tr>
</table>
</div>
</asp:Panel>
<asp:HiddenField runat="server" ID="HiddenField1" />
<asp:Panel runat="server" ID="panel_file" Height="108%" width="100%" BorderWidth="1px" BorderStyle="Dotted" Wrap="False" Visible="False">
<ul>
<li><a class="active" href="#div_5" id="link_5" >File Details</a></li>
<li><a <%--class="active"--%> href="#div_6" id="link_6">Meta Data Validation</a></li>
</ul>
<div id="div_5">
<table style="height: 244px; width: 910px">
<tr>
<td class="auto-style14">
</td>
<td class="auto-style1"> </td>
<td class="auto-style61">
</td>
<td class="auto-style82"> </td>
<td class="auto-style83"> </td>
<td class="auto-style80"> </td>
<td class="auto-style25"> </td>
<td class="auto-style78"> </td>
</tr>
<tr>
<td class="auto-style52"></td>
<td class="auto-style53">
<asp:Label ID="File_Type" runat="server" Text="File Type:"></asp:Label>
</td>
<td class="auto-style54">
<asp:DropDownList ID="DD_File" runat="server" OnSelectedIndexChanged="DL_FileType" AutoPostBack="true" Height="23px" Width="77px">
<asp:ListItem>--Select--</asp:ListItem>
<asp:ListItem>Input</asp:ListItem>
<asp:ListItem>Extract</asp:ListItem>
</asp:DropDownList>
</td>
<td class="auto-style68"></td>
<td class="auto-style58"></td>
<td class="auto-style75"></td>
</tr>
<tr>
<td class="auto-style14"> </td>
<td class="auto-style1">
<asp:Label ID="Input_File" runat="server" Text="Input File:" Visible="False"></asp:Label>
</td>
<td class="auto-style61">
<asp:FileUpload ID="FUpload_FInput" runat="server" Visible="False" />
</td>
<td class="auto-style83">
<asp:Button ID="Btn_FInput_Upload" runat="server" BackColor="SeaGreen" Font-Bold="True" Font-Names="Times New Roman" Font-Size="Medium" ForeColor="White" Text="Upload" Width="76px" Visible="False" />
</td>
<td class="auto-style80">
<asp:Button ID="Btn_FInput_Dwnload" runat="server" BackColor="SeaGreen" Font-Bold="True" Font-Names="Times New Roman" Font-Size="Medium" ForeColor="White" Text="Download Template" Width="160px" Visible="False" />
</td>
<td class="auto-style25"> </td>
<td class="auto-style78"> </td>
</tr>
<tr>
<td class="auto-style14"> </td>
<td class="auto-style1">
<asp:Label ID="Control_file" runat="server" Text="Control File Location:" Visible="False"></asp:Label>
</td>
<td class="auto-style61">
<asp:FileUpload ID="FUpload_FControl" runat="server" Visible="False" />
</td>
<td class="auto-style25"> </td>
<td class="auto-style78"> </td>
</tr>
<tr>
<td class="auto-style14"> </td>
<td class="auto-style1">
<asp:Label ID="Extract_File" runat="server" Text="Extract File Location:" Visible="False"></asp:Label>
</td>
<td class="auto-style61">
<asp:FileUpload ID="FUpload_FLocation" runat="server" Visible="False" />
</td>
<td class="auto-style25"> </td>
<td class="auto-style78"> </td>
</tr>
<tr>
<td class="auto-style66">
</td>
<td class="auto-style81">
</td>
<td class="auto-style27">
<asp:Button ID="Btn_File_Set" runat="server" BackColor="SeaGreen" Font-Bold="True" Font-Names="Times New Roman" Font-Size="Medium" ForeColor="White" Text="Set" Width="72px" OnClick="Btn_File_Set_Click" />
</td>
<td class="auto-style79">
<asp:Button ID="Btn_File_Reset" runat="server" BackColor="SeaGreen" Font-Bold="True" Font-Names="Times New Roman" Font-Size="Medium" ForeColor="White" Text="Reset" Width="66px" />
</td>
</tr>
</table>
</div>
<div id="div_6">
<table style="height: 244px; width: 910px">
<tr>
</tr>
<tr>
<td class="auto-style52"></td>
<td class="auto-style111">
<asp:Label ID="File_MetaData_Validation" runat="server" Text="Meta Data Validation Required:"></asp:Label>
</td>
<td class="auto-style54">
<asp:DropDownList ID="DD_FileMetaData" runat="server" OnSelectedIndexChanged="DL_FileMetaData_Validation" AutoPostBack="true" Height="23px" Width="77px">
<asp:ListItem>--Select--</asp:ListItem>
<asp:ListItem>Yes</asp:ListItem>
<asp:ListItem>No</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="auto-style130"></td>
<td class="auto-style131">
<asp:Label ID="File_MetaData_Location" runat="server" Text="Metadata File Location:" Visible="False"></asp:Label>
</td>
<td class="auto-style132">
<asp:FileUpload ID="FUpload_FMeta" runat="server" Visible="False" />
</td>
<td class="auto-style134">
<asp:Button ID="FUpload_FMeta_Upload" runat="server" BackColor="SeaGreen" Font-Bold="True" Font-Names="Times New Roman" Font-Size="Medium" ForeColor="White" Text="Upload" Width="76px" Visible="False" />
</td>
<td class="auto-style135">
<asp:Button ID="FUpload_FMeta_Dwnload" runat="server" BackColor="SeaGreen" Font-Bold="True" Font-Names="Times New Roman" Font-Size="Medium" ForeColor="White" Text="Download Template" Width="160px" Visible="False" />
</td>
<td class="auto-style136"></td>
<td class="auto-style137"></td>
</tr>
<tr>
<td class="auto-style147">
<asp:Button ID="Btn_FMeta_Set" runat="server" BackColor="SeaGreen" Font-Bold="True" Font-Names="Times New Roman" Font-Size="Medium" ForeColor="White" Text="Set" Width="72px" OnClick="Btn_FMeta_Set_Click" />
</td>
<td class="auto-style79">
<asp:Button ID="Btn_FMeta_Reset" runat="server" BackColor="SeaGreen" Font-Bold="True" Font-Names="Times New Roman" Font-Size="Medium" ForeColor="White" Text="Reset" Width="66px" />
</td>
</tr>
</table>
</div>
</asp:Panel>
</form>
</body>
CSS
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
height: 50px;
}
li {
float: left;
border-right:1px solid #bbb;
}
#link_1,#link_2,#link_3,link4,#link5,#link6{
color: #6f6f6f;
background-color: #eeeeee;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
#link_1 {
color: white;
background-color: #2E8B57;
}
li a.active {
color: white;
background-color: #2E8B57;
}