Bootstrap tabbable 选项卡窗格不工作

Question

在 .aspx 页面中，我有 2 个选项卡：Acct 和 HR。

在后面的代码中我有这些条件：

如果用户是 Acct 则仅显示 Acct 选项卡（隐藏 HR 选项卡和导航）
否则，如果用户是 HR，则仅显示 Hr 选项卡（隐藏 Acct 选项卡和导航）
否则（如果用户不是 Acct 和 Hr）然后显示选项卡和导航菜单（我希望 Acct 将是 active 第一个）

所以案例 #1 和案例 #2 工作正常。

但是情况 #3（需要同时显示选项卡和导航以及所有内容），我遇到了问题：导航 (li) 工作正常（当我点击它时，它显示正确CSS), 但选项卡（内容）总是显示 Acct 选项卡，当我舔到 HR [时不会更改为 HR 选项卡 li

这里是案例 #3 的图片，所以在 page_load() 代码中我设置它首先显示帐户选项卡：

当我切换到 HR 选项卡时，导航菜单发生了变化，但内容选项卡保持不变：

反之亦然，如果我将 HR 设置为 active，那么当我切换到 Acct 时，它不会显示Acct标签内容，继续显示HR的标签内容

这里是标记代码和 C# 代码：

<div class="tabbable tabbable-custom">
                <ul class="nav nav-tabs" style="margin-bottom: 0px">
                    <li style="width: 50%" id="liAcct" runat="server"><a class="no-margin" href="#tabAcct" data-toggle="tab">
                        <h3 class="text-center no-margin bold text-success">ACCT</h3>
                    </a></li>
                    <li style="width: 50%" id="liHR" runat="server"><a class="no-margin" href="#tabHR" data-toggle="tab">
                        <h3 class="text-center no-margin bold text-primary" style="margin-left: 20px !important">HR</h3>
                    </a></li>
                </ul>

                <div class="tab-content" style="border: 1px solid #ddd; border-top: none; padding: 5px">

                    <!-- BEGIN ACCT TAB -->
                    <div class="tab-pane" id="tabAcct" runat="server">

                        <asp:Panel ID="panelAcct" runat="server">
                            <h1>This is Acct content</h1>
                        </asp:Panel>

                    </div>
                    <!-- END TAB -->

                    <!-- BEGIN HR TAB -->
                    <div class="tab-pane" id="tabHR" runat="server">

                        <asp:Panel ID="panelHR" runat="server">
                            <h1>This is HR content</h1>
                        </asp:Panel>

                    </div>
                    <!-- END TAB -->

                </div>
            </div>

在page_load()中：

if (!IsPostBack)
            {
                Page.Title = "Page";
                string managerEmail = HttpContext.Current.User.Identity.Name.ToLower();
                if (requestDAL.GetManagerLevel_byEmail(managerEmail) <= 1)
                {
                    // Shows HR tab
                    liHR.Attributes["class"] = "active";
                    tabHR.Attributes["class"] = "tab-pane active";

                    // Hide Acct tab
                    liAcct.Visible = false;
                    liAcct.Visible = false;
                    panelAcct.Visible = false;

                }
                else if (requestDAL.GetManagerLevel_byEmail(managerEmail) == 2)
                {
                    // Shows ACCT tab
                    liAcct.Attributes["class"] = "active";
                    tabAcct.Attributes["class"] = "tab-pane active";

                    // Hide HR tab
                    liHR.Visible = false;
                    liHR.Visible = false;
                    panelHR.Visible = false;
                }
                else
                {
                    liAcct.Attributes["class"] = "active";
                    tabAcct.Attributes["class"] = "tab-pane active";

                }

            }

Answer 1

Asp.net 更改客户端的所有服务器端控件 ID。您只需要使用 ClientID 来获取正确的标记 ID：

<a class="no-margin" href="#<%= tabAcct.ClientID %>" data-toggle="tab">

<a class="no-margin" href="#<%= tabHR.ClientID %>" data-toggle="tab">

Bootstrap tabbable 选项卡窗格不工作

Boostrap tabbable tab-pane not working

c#

asp.net

jquery

tabpanel

twitter-bootstrap