在jquery中上传文件后设置当前选项卡处于活动状态
Posted
技术标签:
【中文标题】在jquery中上传文件后设置当前选项卡处于活动状态【英文标题】：Set current tab active after file upload in jquery 【发布时间】：2021-09-07 08:58:04 【问题描述】：我有 3 个选项卡，在第二个选项卡中有一个文件上传选项。目前发生的事情是在文件上传完成页面刷新并进入第一个选项卡之后。但我想留在文件上传成功的当前选项卡中。
<ul class="navTabs" role="tablist">
<li role="presentation" class="active"><a href="#c_vendorData" rel="#c_vendorData" aria-controls="vendor data" role="tab"><i class="fa fa-info-circle" aria-hidden="true"></i>Vendor Data</a></li>
<li role="presentation"><a href="#c_upload" rel="#c_upload" aria-controls="upload" role="tab"><i class="fa fa-download" aria-hidden="true"></i>Upload</a></li>
<li role="presentation"><a href="#c_config" rel="#c_config" aria-controls="configuration" role="tab"><i class="fa fa-cog" aria-hidden="true"></i>Configuration</a></li>
<span class="active-marker"></span>
</ul>
文件上传HTML代码
<div class="col-md-4">
<div class="form-group">
<asp:FileUpload ID="IPFEEBtn" class="form-control" runat="server" name="IPFEEBtn" />
</div>
</div>
<div class="col-md-6 filterButton">
<div class="form-group">
<asp:Button ID="UploadBtn" runat="server" Text="Upload" OnClick="UploadBtn_Click" CssClass="btn button" />
<asp:Button ID="IPFEEDownloadbtn" runat="server" Text="Download Format" OnClick="IPFEEDownloadbtn_Click" CssClass="btn button white" />
</div>
</div>
</div>
<!--end config-->
文件上传后如何在第二个选项卡中激活？
更新
<!--upload-->
<div id="c_upload" role="tabpanel" class="tabPane upload">
<div class="panelContent">
<div class="filter">
<div class="fLeft">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<asp:FileUpload ID="IPFEEBtn" class="form-control" runat="server" name="IPFEEBtn" />
</div>
</div>
<div class="col-md-6 filterButton">
<div class="form-group">
<asp:Button ID="UploadBtn" runat="server" Text="Upload" OnClick="UploadBtn_Click" CssClass="btn button" />
<asp:Button ID="IPFEEDownloadbtn" runat="server" Text="Download Format" OnClick="IPFEEDownloadbtn_Click" CssClass="btn button white" />
</div>
</div>
</div>
</div>
<div class="fRight"></div>
</div>
<div class="datatableGrid">
<div class="dt_content">
<div class="dt_tables">
<div class="iptable table-responsive">
<asp:UpdatePanel ID="upNeInvReportGridView" runat="server">
<ContentTemplate>
<asp:GridView ID="grdStructId" EditRowStyle-Wrap="true" AutoGenerateColumns="false" AllowPaging="true" PageSize="5" CssClass="table dataTable dtTable table-bordered nowrap pageResize" runat="server"
>
<Columns>
<%--<asp:TemplateField HeaderText="ID">
<ItemTemplate>
<asp:Label ID="IPFEEId" Text='<%# Bind("ID") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>--%>
<asp:TemplateField HeaderText="SAP_ID">
<ItemTemplate>
<asp:Label ID="IPFEESAPID" Text='<%# Bind("SAP_ID") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="CITY">
<ItemTemplate>
<asp:Label ID="IPFEECITY" Text='<%# Bind("CITY") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="FINAL_SR_DATE">
<ItemTemplate>
<asp:Label ID="IPFEEFINALSRDATE" Text='<%# Bind("FINAL_SR_DATE") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="FINAL_SO_DATE">
<ItemTemplate>
<asp:Label ID="IPFEEFINALSODATE" Text='<%# Bind("FINAL_SO_DATE") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="INVOICE_DATE">
<ItemTemplate>
<asp:Label ID="IPFEEINVOICEDATE" Text='<%# Bind("INVOICE_DATE") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="IP_ID">
<ItemTemplate>
<asp:Label ID="IPFEEIPID" Text='<%# Bind("IP_ID") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="APPLICABLE_MSA">
<ItemTemplate>
<asp:Label ID="IPFEEAPPLICABLEMSA" Text='<%# Bind("APPLICABLE_MSA") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="SITE_CATEOGRY">
<ItemTemplate>
<asp:Label ID="IPFEESITECATEOGRY" Text='<%# Bind("SITE_CATEOGRY") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<%--<asp:TemplateField HeaderText="ID_OD">
<ItemTemplate>
<asp:Label ID="IPFEEIDOD" Text='<%# Bind("ID_OD") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>--%>
<asp:TemplateField HeaderText="ID_OD">
<ItemTemplate>
<asp:Label ID="IPFEEIDOD" Text='<%# Bind("ID_OD") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="RFI_DATE">
<ItemTemplate>
<asp:Label ID="IPFEERFIDATE" Text='<%# Bind("RFI_DATE") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="BILL_START_DATE">
<ItemTemplate>
<asp:Label ID="IPFEEBILLSTARTDATE" Text='<%# Bind("BILL_START_DATE") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="BILL_END_DATE">
<ItemTemplate>
<asp:Label ID="IPFEEBILLENDDATE" Text='<%# Bind("BILL_END_DATE") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="NO_OF_OPCO">
<ItemTemplate>
<asp:Label ID="IPFEENOOFOPCO" Text='<%# Bind("NO_OF_OPCO") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ACTUAL_RENT_AMT">
<ItemTemplate>
<asp:Label ID="IPFEEACTUALRENTAMT" Text='<%# Bind("ACTUAL_RENT_AMT") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="TENURE">
<ItemTemplate>
<asp:Label ID="IPFEETENURE" Text='<%# Bind("TENURE") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="GSM_ANTENNA_EXC_SAIL">
<ItemTemplate>
<asp:Label ID="IPFEEGSMANTENNAEXCSAIL" Text='<%# Bind("GSM_ANTENNA_EXC_SAIL") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="GSM_ANTENNA_NOTEXC_SAIL">
<ItemTemplate>
<asp:Label ID="IPFEEGSMANTENNANOTEXCSAIL" Text='<%# Bind("GSM_ANTENNA_NOTEXC_SAIL") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="REV_TOT_CNT_GSM_ANTENNA">
<ItemTemplate>
<asp:Label ID="IPFEEREVTOTCNTGSMANTENNA" Text='<%# Bind("REV_TOT_CNT_GSM_ANTENNA") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="MW_ANTENNA_OF_UPTO06_DIA">
<ItemTemplate>
<asp:Label ID="IPFEEMWANTENNAOFUPTO06DIA" Text='<%# Bind("MW_ANTENNA_OF_UPTO06_DIA") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="MW_ANTENNA_OF_12DIA">
<ItemTemplate>
<asp:Label ID="IPFEEMWANTENNAOF12DIA" Text='<%# Bind("MW_ANTENNA_OF_12DIA") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="MW_ANTENNA_OF_GREATER12_DIA">
<ItemTemplate>
<asp:Label ID="IPFEEMWANTENNAOFGREATER12DIA" Text='<%# Bind("MW_ANTENNA_OF_GREATER12_DIA") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="HEIGHT_OF_HEIGHEST_ANTENNA">
<ItemTemplate>
<asp:Label ID="IPFEEHEIGHTOFHEIGHESTANTENNA" Text='<%# Bind("HEIGHT_OF_HEIGHEST_ANTENNA") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="WEIGHT_OF_TOWER_TOP_BTS">
<ItemTemplate>
<asp:Label ID="IPFEEWEIGHTOFTOWERTOPBTS" Text='<%# Bind("WEIGHT_OF_TOWER_TOP_BTS") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="WIND_SPEED">
<ItemTemplate>
<asp:Label ID="IPFEEWINDSPEED" Text='<%# Bind("WIND_SPEED") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="POWER_RATING_OF_BTS">
<ItemTemplate>
<asp:Label ID="IPFEEPOWERRATINGOFBTS" Text='<%# Bind("POWER_RATING_OF_BTS") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="FLOOR_SPACE_INDOOR">
<ItemTemplate>
<asp:Label ID="IPFEEFLOORSPACEINDOOR" Text='<%# Bind("FLOOR_SPACE_INDOOR") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="FLOOR_SPACE_OUTDOOR">
<ItemTemplate>
<asp:Label ID="IPFEEFLOORSPACEOUTDOOR" Text='<%# Bind("FLOOR_SPACE_OUTDOOR") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="EB_STATUS_VALUE">
<ItemTemplate>
<asp:Label ID="IPFEEEBSTATUSVALUE" Text='<%# Bind("EB_STATUS_VALUE") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="NO_OF_US">
<ItemTemplate>
<asp:Label ID="IPFEENOOFUS" Text='<%# Bind("NO_OF_US") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="HIGHER_RENT">
<ItemTemplate>
<asp:Label ID="IPFEHIGHERRENT" Text='<%# Bind("HIGHER_RENT") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="RRH_COUNT">
<ItemTemplate>
<asp:Label ID="IPFERRHCOUNT" Text='<%# Bind("RRH_COUNT") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="VOLUME_DISCOUNT">
<ItemTemplate>
<asp:Label ID="IPFEVOLUMEDISCOUNT" Text='<%# Bind("VOLUME_DISCOUNT") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="VENDOR_NAME">
<ItemTemplate>
<asp:Label ID="IPFEEVENDORNAME" Text='<%# Bind("VENDOR_NAME") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="CIRCLE">
<ItemTemplate>
<asp:Label ID="IPFEECIRCLE" Text='<%# Bind("CIRCLE") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="APPLICABLE_SITE_RENT">
<ItemTemplate>
<asp:Label ID="IPFEEAPPLICABLESITERENT" Text='<%# Bind("APPLICABLE_SITE_RENT") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<%--<asp:TemplateField HeaderText="LAST_UPDATED_DATE">
<ItemTemplate>
<asp:Label ID="IPFEELASTUPDATEDDATE" Text='<%# Bind("LAST_UPDATED_DATE") %>' runat="server"></asp:Label>
</ItemTemplate>
</asp:TemplateField>--%>
</Columns>
<PagerStyle HorizontalAlign="right" CssClass="GridPager" />
<EditRowStyle Wrap="True" />
<EmptyDataTemplate>
No Record Found
</EmptyDataTemplate>
</asp:GridView>
</ContentTemplate>
<Triggers>
<%-- <asp:AsyncPostBackTrigger ControlID="bSearch" EventName="Click" />--%>
<asp:PostBackTrigger ControlID="bExportToExcel" />
<asp:PostBackTrigger ControlID="UploadBtn" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
<div class="dt_footer">
<asp:Button ID="bExportToExcel" runat="server" Text="Export To Excel" OnClick="bExportToExcel_Click" CssClass="btn button" />
</div>
</div>
</div>
</div>
</div>
<!--end upload-->【问题讨论】：
嗨，您使用的是哪个引导程序版本，并且总是会打开第二个选项卡？ @Swati: 不总是..如何获得引导版本？ 你一定已经为 bootstrap 添加了 cdn，你会在那里看到。src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.. 所以这里的引导版本是 3.3.7 。
【参考方案1】：
基于提供的 HTML 和代码，您可以通过 javascript 来实现。试试下面的代码：
<script>
$(function ()
var elementObject = localStorage.getItem('active');
if (elementObject)
var element = JSON.parse(elementObject);
$('.navTabs').children().removeClass("active");
$('.navTabs').children().eq(parseInt(element.index)).addClass('active');
window.location.hash = element.id;
);
$(document).on('click', '.navTabs li', function ()
debugger;
$('.navTabs li').removeClass("active");
$(this).addClass("active");
var obj = index: $(this).index(), id: $(this).children()[0].rel ;
localStorage.setItem('active', JSON.stringify(obj));
);
</script>
解释：在点击 ul 项目时，我们将点击的一个 li 元素保存到具有其 id 的对象中，并且在页面加载时，我们正在检索它并再次将其设置为先前/保存的状态。
【讨论】：
@hud 让我检查一下！ @hud 我运行了你的代码，它运行良好。您能告诉我您正在执行哪些步骤吗？ @hud 加入：chat.***.com/rooms/234254/…以上是关于在jquery中上传文件后设置当前选项卡处于活动状态的主要内容，如果未能解决你的问题，请参考以下文章
如果选项卡未处于活动状态，jqgrid 无法在 jquery-ui 选项卡下正确加载
根据访问的路线设置 Material-UI 选项卡处于活动状态