javascript - 当选项卡在 mvc bootstrap tab-content 中处于事件状态时动态加载内容

Question

我正在使用 bootstrap 和 ASP.NET mvc 创建一个 Web 应用程序。我在每个选项卡上使用部分 View ，但现在所有数据都是同时输入的。我想仅在选项卡处于事件状态时调用我的部分来查询和返回数据。我怎样才能做到这一点？

<div>
    <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="#tab1" data-toggle="tab">Service</a></li>
        <li><a href="#tab2" data-toggle="tab">Instrument</a></li>
    </ul>

    <div class="tab-content">

        <div class="tab-pane fade in active" id="tab1">
            @Html.Action("Index", "Controller1")

        </div>
        <div class="tab-pane fade" id="tab2">
            @Html.Action("Index", "Controller2")
        </div>

    </div>
</div>

Answer 1

您需要在选项卡上放置一个 onClick 事件，如下所示的内容应该适合您

<ul class="nav nav-tabs nav-justified">
   <li class="active" data-ref="1"><a href="#tab1" data-toggle="tab">Service</a></li>
   <li data-ref="2"><a href="#tab2" data-toggle="tab">Instrument</a></li>
</ul>


<div class="tab-content">
    <div class="tab-pane fade in active" id="tab1">
        <div id="tabone"></div>
    </div>

$(".nav-tabs li").click(function(){
  var pageId = $(this).data('ref');
   $.ajax({
      url: url,
      data: {pageId:pageId },
      success: function(response){
        if(pageId == 1)
        {
           $('#tab1').replaceWith(response);
        }
        else.... 
      }
    });
});