jquery选项卡内容有效但tabheader没有，非常罕见的bug

Question

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

我使用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);有效。使用这行代码，它将显示来自tabpage 3的内容！

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

---

---

如果提交表单 - ＆gt;转到标签页3

---

---

Heee我看到tabpage 3的内容，但tabheader仍然在tabpage 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