Blockquote I'm using Bootstrap TabPane,I have two Tabs, But if there is any 'Auto post back' event Fires I loose my current tab index and goes to first tab which is by default active. I Tried Javascript Found on codeproject but its working fine for button click that they send as demo , when i put drop-down into their code it stops working, Hidden fields value is Comes null on if(this.ispostback){ TabName.Value = Request.Form[TabName.UniqueID];}
我的第二个选项卡只对管理员可见，我也必须在服务器端隐藏它。我想同时学习服务器端和客户端
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CS.aspx.cs" Inherits="CS" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.nav-tabs a, .nav-tabs a:hover, .nav-tabs a:focus
{
outline: 0;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="panel panel-default" style="width: 500px; padding: 10px; margin: 10px">
<div id="Tabs" role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li><a href="#personal" aria-controls="personal" role="tab" data-toggle="tab">Personal
</a></li>
<li><a href="#employment" aria-controls="employment" role="tab" data-toggle="tab">Employment</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content" style="padding-top: 20px">
<div role="tabpanel" class="tab-pane active" id="personal">
This is Personal Information Tab
<asp:DropDownList ID="DropDownList1" CssClass="form-control" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="true" runat="server"></asp:DropDownList>
</div>
<div role="tabpanel" class="tab-pane" id="employment">
This is Employment Information Tab
</div>
</div>
</div>
<br />
<br />
<asp:Button ID="Button1" Text="Submit" runat="server" CssClass="btn btn-primary" />
<asp:HiddenField ID="TabName" runat="server" />
</div>
<script type="text/javascript">
$(function () {
var tabName = $("[id*=TabName]").val() != "" ? $("[id*=TabName]").val() : "personal";
$('#Tabs a[href="#' + tabName + '"]').tab('show');
$("#Tabs a").click(function () {
$("[id*=TabName]").val($(this).attr("href").replace("#", ""));
});
});
</script>
</form>
</body>
</html>
这是我背后的代码`
public partial class CS : System.Web.UI.Page
{
MySqlConnection con = new MySqlConnection(ConfigurationManager.ConnectionStrings["Conn"].ConnectionString);
MySqlConnection con2 = new MySqlConnection(ConfigurationManager.ConnectionStrings["Con"].ConnectionString);
protected void Page_Load(object sender, EventArgs e)
{
if (this.IsPostBack)
{
TabName.Value = Request.Form[TabName.UniqueID];
}
if(!IsPostBack)
{
CrmNo();
}
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
}
void FillDDl()
{
//This code will Fill my Dropdown on page load
}
}
最佳答案
我会使用 jquery 通过散列调用选项卡。这样，正确的选项卡将保持选中状态。
如果您在 html 中的 head 标记内调用 js，您可以这样做。
$(document).ready(function () {
if (location.hash != '') {
$('a[href="' + location.hash + '"]').tab('show');
}
else {
$('a[role="tab"]:first').tab('show');
}
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
if (history.pushState) {
history.pushState(null, null, '#' + $(e.target).attr('href').substr(1));
} else {
location.hash = '#' + $(e.target).attr('href').substr(1);
}
});
});
如果你在文档正文中调用你的js，那么你可以简单地这样做。
if (location.hash != '') {
$('a[href="' + location.hash + '"]').tab('show');
}
else
{
$('a[role="tab"]:first').tab('show');
}
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
if (history.pushState) {
history.pushState(null, null, '#' + $(e.target).attr('href').substr(1));
} else {
location.hash = '#' + $(e.target).attr('href').substr(1);
}
});
此 js 代码应该做的是调整 URL，使其具有选项卡的 ID 和 url 的哈希值。这将确保该选项卡在回发期间保持选中状态。
当然，您需要确保此代码位于您对 jquery js 和 bootstrap js 文件的调用之下，以使其正常工作。
关于javascript - Active Bootstrap 选项卡在 DropDown SelectedIndexChanged 事件中丢失其索引？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32368180/