禁止在页面加载时自动激活选项卡列表的所有选项卡

Question

我有一个设置为tablist的剃刀视图，第一个选项卡在加载时处于活动状态。每个选项卡在单击时都调用partialview，但我注意到我的所有选项卡（及其部分视图均在页面加载时加载）。在任何给定时间，我都不需要加载多个以上的局部视图。

如何自动加载第一个标签，而仅在单击该标签时加载其他标签？我怀疑我需要JavaScript来实现此目的，因此我在加载时添加了一个用于标识活动标签的函数。如何最好地将呼叫附加到ID为tabpanels的相应局部视图？

    <div class="card" id="tabs">
        <ul class="nav nav-pills nav-fill" role="tablist">
          <li role="presentation" class="active"><a class="nav-link active" href="#requisition" aria-controls="home" role="tab" data-toggle="tab"><i class="fa fa-home"></i> <span>Requisition</span></a></li>
          <li role="presentation"><a class="nav-link" href="#approval" role="tab" data-toggle="tab"><i class="fa fa-thumbs-o-up"></i>  <span>Approval</span></a></li>
          <li role="presentation"><a class="nav-link" href="#consolidate" role="tab" data-toggle="tab"><i class="fa fa-gavel"></i>  <span>Consolidate</span></a></li>
          <li role="presentation"><a class="nav-link" href="#bids" role="tab" data-toggle="tab"><i class="fa fa-gavel"></i>  <span>Bids</span></a></li>
          <li role="presentation"><a class="nav-link" href="#PO" role="tab" data-toggle="tab"><i class="fa fa-shopping-cart"></i>  <span>PO</span></a></li>
          <li role="presentation"><a class="nav-link" href="#receive" role="tab" data-toggle="tab"><i class="fa fa-cog"></i>  <span>Receive</span></a></li>
          <li role="presentation"><a class="nav-link" href="#invoice" role="tab" data-toggle="tab"><i class="fa fa-plus-square-o"></i>  <span>Invoice</span></a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="requisition">
            @await Html.PartialAsync("_NewRequisition", canApproveReq)
          </div>
          <div role="tabpanel" class="tab-pane" id="approval">
            @await Html.PartialAsync("_Approvals", canApproveReq)
          </div>
          <div role="tabpanel" class="tab-pane" id="consolidate">
            @await Html.PartialAsync("_Consolidate")
          </div></div>

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        var target = $(e.target).attr("href") // activated tab
        alert(target);
      });