Запретить автоматическую активацию всех вкладок списка при загрузке страницы - PullRequest
Новая
       21

Запретить автоматическую активацию всех вкладок списка при загрузке страницы

0 голосов
/ 15 января 2020

У меня есть бритва с настройкой tablist с первой активной вкладкой при загрузке. Каждая вкладка вызывает partialview при нажатии, но я заметил, что все мои вкладки (и их частичные представления загружаются при загрузке страницы). Мне не нужно загружать более одного частичного представления в любой момент времени.

Как я могу автоматически загрузить первую вкладку, но загружать остальные только при нажатии на вкладку? Я подозреваю, что для этого мне понадобится JavaScript, поэтому я добавил функцию загрузки, которая идентифицирует активную вкладку. Как лучше всего прикрепить вызов к соответствующему частичному просмотру с идентификатором 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);
      });
...