Question

我正在使用ASP.NET MVC和boostrap 3

我正在使用引导标签，我的主要观点是这样的

  <div class="row">
      <div class="tabs-container">
          <ul class="nav nav-tabs" id="test">
              <li class="active"><a data-toggle="tab" href="#tab-operations">Operations</a></li>
              <li class=""><a data-toggle="tab" href="#tab-categories">Categories</a></li>
          </ul>
          @Html.Partial("_Ordering", Model)
      </div>
  </div>

像这样的部分视图_Ordering

<div class="tab-content" id="ordDiv">
    <div id="tab-operations" class="tab-pane active">
        // some content not important
    </div>
    <div id="tab-categories" class="tab-pane">
        // some content not important
    </div>
</div>

我正在使用unobtrusive-ajax来更新局部视图

@Ajax.ActionLink("cancel", "PartialOrdering", null,
    new AjaxOptions { HttpMethod = "GET", Url = Url.Action("PartialOrdering"), UpdateTargetId = "ordDiv", InsertionMode = InsertionMode.Replace }, null)

正确更新标签的内容没有任何问题。

问题是我想在ajax请求刷新内容之前显示已经存在的选项卡。我像这样使用了js代码

var a = $('#test li.active').find('a');
a.click();      // not showing the content of the tab
a.tab('show');  // also this not showing the content of the tab

以前的代码在控制台中没有出现任何错误，但是没有显示所需的选项卡

Answer 1

如果您想在此处显示特定的标签，则需要传递特定锚标记的ID，并根据该锚点调用tab()函数。

$(document).ready(function(){
  activeaTab('tab-categories');
});
function activeaTab(tab){
  $('.nav-tabs a[href="#' + tab + '"]').tab('show');
};

https://jsfiddle.net/ewaeLkvv/

引导标签（＆＃39;显示＆＃39;）不适用于dynimcally加载＆tab;内容＆＃39;

1 个答案: