如何在适当的选项卡中保持突出显示？
Posted
技术标签:
【中文标题】如何在适当的选项卡中保持突出显示？【英文标题】：How to stay highlight in appropriate tab? 【发布时间】：2016-04-15 12:11:21 【问题描述】：当我从我的朋友那里得到这个代码时，我想在 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 Height="15%" runat="server" >
<img src="Images/Title.png" style="height: 83px" />
</asp:Panel>
<table style="width:100%; height: 132px; margin-top: 2px;">
<tr>
<td style="width:25%">
<asp:Panel runat="server" BorderWidth="1px" BorderStyle="Dotted"> Drag From Here
</asp:Panel>
</td>
<td style="width:75%">
<asp:Panel runat="server" 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%" 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%" 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%" 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;
【问题讨论】：
【参考方案1】：我尝试在 jsfiddle 中不使用 CSS 进行编码
参考链接
JSFIDDLE
请比较一下...
在适当的标签上突出显示
【讨论】：
我给asp.net代码...你把它作为一个html..检查一次 为什么在 标签中使用 ？ 请将外部托管代码编辑到帖子中；这样做将确保即使链接断开，它仍然有用。我的脚本 is not allowed to do this 因为潜在的许可问题。以上是关于如何在适当的选项卡中保持突出显示？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 WinRT/UWP RichEditBox 中保持突出显示的文本失去焦点？
目标 C：如何突出显示 tableView 单元格并在重新加载表格时保持突出显示？
React Native TextInput 抓取突出显示的文本，并在我点击离开时保持突出显示
选择其他按钮时，ListView 突出显示所选项目颜色不会保持不变