Active Bootstrap Tab在DropDown SelectedIndexChanged事件中丢失其索引

Active Bootstrap Tab Looses Its Index on DropDown SelectedIndexChanged event?

本文关键字：索引 事件 SelectedIndexChanged Bootstrap Tab DropDown Active      更新时间：2023-09-26

区块报价我使用的是Bootstrap TabPane，我有两个选项卡，但如果有任何"自动发布"事件，我会释放当前选项卡索引，转到默认活动的第一个选项卡。我尝试了在代码项目中找到Javascript，但它可以很好地用于他们作为演示发送的按钮点击，当我将下拉列表放入他们的代码中时，它停止工作，隐藏字段值为空，如果(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文件的调用下方，以便它正常工作。

相关文章：