jquery tab 内容有效，但 tabheader 无效，非常罕见的错误

Question

我有一个包含 3 个标签页的标签。我的第二个标签页有一个按钮，它在模态对话框中生成表单。如果我单击模态对话框中的提交按钮，则会在数据库中添加一行，并且模态对话框将被关闭。在此之后，我使用 OnSuccess 方法，它转到将显示第三个标签页的函数。这行得通！但问题是它只显示该标签页的内容，但标签页眉（更好的词？）仍然在第二个标签页上。我不知道如何解决这个问题。

我使用 jquery-ui-1.10.3。

我尝试过的：

我在这里构建我的表单，如果它有效，则调用 OnSuccess 方法：

 @using (Ajax.BeginForm("Index", new AjaxOptions { OnSuccess = "refreshAlerts()" }))
 { ... }

我的 HTML：

    <div id="tabs" class="tabbable">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#statistics" data-toggle="tab">Statistieken</a></li>
            <li><a href="#actions" data-toggle="tab">Alarmen</a></li>
            <li><a href="#settings" data-toggle="tab">Instellingen</a></li>
        </ul>
    </div>

这是我几乎尝试过所有方法的方法：

function refreshAlerts() {
    var tab = $('#tabs').tabs();
    jQuery("#tabs > ul").tabs({ active: null });
    jQuery("#tabs > ul").tabs({ selected: null });
    tab.tabs({ active: 2 });
    tab.tabs({ selected: 2 });
    tab.tabs('load', 2);
    tab.tabs('option', 'active', 2);
    tab.tabs('option', 'selected', 2);
    tab.tabs(2);
}

只有tab.tabs('option', 'active', 2); 有效。使用这行代码，它将显示标签页 3 中的内容！

在下图中，我在第二个 tabPage 上，按钮打开一个带有表单的模态对话框。

---

---

如果表单已提交 -> 转到标签页 3

---

---

嘿，我看到了标签页 3 的内容，但标签页眉仍在标签页 2 上。我该如何解决这个问题？

提交表单后，我的ul是这样的：

        <ul class="nav nav-tabs ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
            <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="statistics" aria-labelledby="ui-id-1" aria-selected="false"><a href="#statistics" data-toggle="tab" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Statistieken</a></li>
            <li class="active ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="actions" aria-labelledby="ui-id-2" aria-selected="false"><a href="#actions" data-toggle="tab" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">Alarmen</a></li>
            <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="settings" aria-labelledby="ui-id-3" aria-selected="true"><a href="#settings" data-toggle="tab" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">Instellingen</a></li>
        </ul>

如您所见，第二个 li 具有“活动”类。

Answer 1

不确定您的 HTML 是否有问题，我尝试使用此示例并按预期工作...

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">1?</a></li>
    <li><a href="#tabs-2">2?</a></li>
    <li><a href="#tabs-3">3?</a></li>
  </ul>
  <div id="tabs-1">
    <p>this is 1</p>
  </div>
  <div id="tabs-2">
    <p>this is 2</p>
  </div>
  <div id="tabs-3">
    <p>3!!!!</p>
  </div>
</div>

<script>
  var tab = $('#tabs').tabs();

  $("#tabs > ul").tabs({ active: null,selected: null });
  tab.tabs({ active: 2,selected: 2 });
  tab.tabs('load', 2);
  tab.tabs('option', 'active', 2);
  tab.tabs('option', 'selected', 2);
  tab.tabs(2);
</script>

点击查看demo here