在回发引导程序选项卡之后使当前选项卡处于活动状态
[英]Make current tab active after postback bootstrap tabs
问题描述
I am using bootstrap tabs in my asp.net project, Tabs are working fine but when the user clicks on any of the button or any postback occurs, 
我在asp.net项目中使用了引导程序选项卡，选项卡运行正常，但是当用户单击任何按钮或发生任何回发时，
First tab get selected. 第一个选项卡被选中。
I tried hidden field with jquery but it's not working. 我尝试用jquery隐藏字段，但是它不起作用。
What am I missing kindly elaborate please. 请给我详细说明一下。
Here is my code : 这是我的代码：
<script type="text/javascript">
$(document).ready(function () {
var selectedTab = $("#<%=hfTab.ClientID%>");
var tabId = selectedTab.val() != "" ? selectedTab.val() : "personal";
$('#dvTab a[href="#' + tabId + '"]').tab('show');
$("#dvTab a").click(function () {
selectedTab.val($(this).attr("href").substring(1));
});
});
</script>
<div id="dvTab">
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#personal" aria-controls="personal" role="tab" data-toggle="tab">Personal Information</a></li>
<li><a href="#pf" aria-controls="pf" role="tab" data-toggle="tab">PF Nominee</a></li>
<li><a href="#gf" aria-controls="gf" role="tab" data-toggle="tab">GF Nominee</a></li>
<li><a href="#edu" aria-controls="edu" role="tab" data-toggle="tab">Education Details</a></li>
<li><a href="#fam" aria-controls="fam" role="tab" data-toggle="tab">Family Details</a></li>
<li><a href="#emphist" aria-controls="emphist" role="tab" data-toggle="tab">Employment History</a></li>
</ul>
<div class="tab-content">
<div id="personal" role="tabpanel" class="tab-pane active">
...
</div>
<div id="pf" role="tabpanel" class="tab-pane">
..
</div>
<div id="gf" role="tabpanel" class="tab-pane">
..
</div>
<div id="edu" role="tabpanel" class="tab-pane">
<asp:Button runat="server" ID="btn_AddEdu" Text="Add Degree/Certificate" OnClick="btn_AddEdu_Click" /><br />
</div>
</div>
</div>
<asp:HiddenField ID="hfTab" runat="server" />
The button is placed in Education Details Tab, On the click event of that button , I added : 该按钮位于“教育详细信息”选项卡中，在该按钮的click事件上，我添加了：
protected void btn_AddEdu_Click(object sender, EventArgs e)
{
hfTab.Value = "edu";
}
2 个解决方案
解决方案1
1 2016-05-26 06:24:11
Change this line 更改此行
$('#dvTab a[href="#' + tabId + '"]').tab('show');
to 至
$('.nav-tabs a[href="#' + tabId + '"]').tab('show');
You are selecting on basis of id dvTab which is not there. 您正在基于不存在的id dvTab进行选择。
Edit 编辑
As per your comments your jquery file is not added properly please add jquery and bootstrap in order. 根据您的评论，您的jquery文件未正确添加，请按顺序添加jquery和bootstrap。 Also include these file at bottom of page. 在页面底部也包括这些文件。
<script src="Scripts/jquery-2.1.3.min.js"></script>
<script src="Scripts/bootstrap.js"></script>
解决方案2
1 已采纳 2016-05-26 07:16:06
Add the script references in this order( at the top of the page ): 按此顺序添加脚本引用（ 在页面顶部 ）：
- Bootstrap CSS first 首先引导CSS
- jQuery jQuery的
- bootstrap.js bootstrap.js
Refrences: Refrences：
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Complete solution: 完整的解决方案：
Copy and paste this code as is and it will work: 照原样复制并粘贴此代码，它将起作用：
<head runat="server">
<title></title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var selectedTab = $("#<%=hfTab.ClientID%>");
var tabId = selectedTab.val() != "" ? selectedTab.val() : "personal";
$('#dvTab a[href="#' + tabId + '"]').tab('show');
$("#dvTab a").click(function () {
selectedTab.val($(this).attr("href").substring(1));
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="dvTab">
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#personal" aria-controls="personal" role="tab" data-toggle="tab">Personal Information</a></li>
<li><a href="#pf" aria-controls="pf" role="tab" data-toggle="tab">PF Nominee</a></li>
<li><a href="#gf" aria-controls="gf" role="tab" data-toggle="tab">GF Nominee</a></li>
<li><a href="#edu" aria-controls="edu" role="tab" data-toggle="tab">Education Details</a></li>
<li><a href="#fam" aria-controls="fam" role="tab" data-toggle="tab">Family Details</a></li>
<li><a href="#emphist" aria-controls="emphist" role="tab" data-toggle="tab">Employment History</a></li>
</ul>
<div class="tab-content">
<div id="personal" role="tabpanel" class="tab-pane active">
...
</div>
<div id="pf" role="tabpanel" class="tab-pane">
..
</div>
<div id="gf" role="tabpanel" class="tab-pane">
..
G Nom NOm
</div>
<div id="edu" role="tabpanel" class="tab-pane">
<asp:Button runat="server" ID="btn_AddEdu" Text="Add Degree/Certificate" OnClick="btn_AddEdu_Click" /><br />
</div>
</div>
</div>
<asp:HiddenField ID="hfTab" runat="server" />
</form>
</body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.