Bootstrap标签点击按钮无法切换问题求助

我看了你的代码，问题主要出在两个地方：PostBack后的状态维护和标签项（li）的Class设置错误，咱们一步步来修正：

问题分析 #

1. Class设置错误：你给result2添加的nav nav-tabs是<ul>标签的样式类，不是<li>标签应该用的。<li>标签只需要active类来标记当前激活的标签，其他未激活的li不需要额外加这个样式。
2. PostBack状态丢失：ASP.NET服务器按钮点击会触发页面回发，回发后如果没有正确恢复标签的激活状态，页面会回到初始的标签页，看起来像是没切换成功。
3. TabPane的Class不完整：Bootstrap 3的tab-pane fade需要加上in类才能正常显示（fade是淡入效果，in是触发显示），你的Section7和Section8在后台设置时没加in。

修正方案 #

1. 修正前端TabPane的初始Class #

先确保所有tab-pane都有基础的tab-pane fade类，比如：

<div role="tabpanel" runat="server" id="Section7" class="tab-pane fade">
<!-- ... 内容 ... -->
</div>
<div role="tabpanel" runat="server" id="Section8" class="tab-pane fade">
<!-- ... 内容 ... -->
</div>
<div role="tabpanel" class="tab-pane fade" id="Section9">
<!-- ... 内容 ... -->
</div>

2. 修正后台代码的Class设置 #

我们用ViewState来记录当前激活的标签页，这样回发后能正确恢复状态：

Page_Load事件代码：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // 初始状态：激活第一个标签
        ViewState["ActiveTab"] = "Section7";
        SetActiveTab("Section7");
    }
    else
    {
        // 回发后恢复之前的激活状态
        if (ViewState["ActiveTab"] != null)
        {
            SetActiveTab(ViewState["ActiveTab"].ToString());
        }
    }
}

// 封装一个设置激活标签的方法，避免重复代码
private void SetActiveTab(string tabId)
{
    // 重置所有标签项的Class
    result1.Attributes["class"] = "";
    result2.Attributes["class"] = "";
    // 重置所有TabPane的Class
    Section7.Attributes["class"] = "tab-pane fade";
    Section8.Attributes["class"] = "tab-pane fade";
    Section9.Attributes["class"] = "tab-pane fade";

    // 根据传入的tabId设置激活状态
    switch (tabId)
    {
        case "Section7":
            result1.Attributes["class"] = "active";
            Section7.Attributes["class"] = "tab-pane fade active in";
            break;
        case "Section8":
            result2.Attributes["class"] = "active";
            Section8.Attributes["class"] = "tab-pane fade active in";
            break;
        case "Section9":
            // 第三个标签的li没有runat="server"，如果需要后台控制可以加上runat="server"并设置id
            // 这里假设第三个标签的li id是result3
            // result3.Attributes["class"] = "active";
            Section9.Attributes["class"] = "tab-pane fade active in";
            break;
    }
}

按钮点击事件代码：

protected void but_Submit_Click(object sender, EventArgs e)
{
    // 这里可以保留你的提交逻辑
    // ...

    // 设置激活第二个标签，并记录到ViewState
    ViewState["ActiveTab"] = "Section8";
    SetActiveTab("Section8");
}

protected void but_Submit1_Click(object sender, EventArgs e)
{
    // 你的保存逻辑
    // ...

    // 设置激活第三个标签
    ViewState["ActiveTab"] = "Section9";
    SetActiveTab("Section9");
}

protected void but_Submit2_Click(object sender, EventArgs e)
{
    // 你的保存逻辑
    // ...

    // 如果需要，这里可以设置回到第一个标签或者其他操作
    // ViewState["ActiveTab"] = "Section7";
    // SetActiveTab("Section7");
}

3. 额外注意点 #

• 如果第三个标签的<li>需要后台控制，记得给它加上runat="server"和id（比如id="result3"），这样就能在后台设置它的active类了。
• 确保你引用的Bootstrap版本是正确的（上面的代码针对Bootstrap 3，如果是Bootstrap 4+，in类改成show即可）。

这样修改后，点击服务器按钮触发回发后，页面就能正确切换到对应的标签页了。

内容的提问来源于stack exchange，提问作者Ann Sara