Bootstrap tab panel - How to go to a specific tab?

Question

I have, in PHP, a method whose code returns values, passing them to a View, as block below:

return view('PesquisaView')
     ->with('clientes',$resultadoClientes)
     ->with('advs',$resultadoAdvs)
     ->with('bps',$resultadoBPs)
     ->with('mensagemDoUploadRemessa',$avisoUpload);

However, this View has several tabs (tabs) based on the Boostrap framework and the 'Return' displays the View in the first tab, the one that was defined as 'active' at the beginning of the page use.

I would like the 'Return' statement, which causes the View to open, to show directly the tab I want, not the 'default'. In the case of 'id' 'Idpanecitipesquisarremessa'.

The html code that defines the guides is

<ul class="nav nav-tabs">
     <li><a href="#idQExpert" data-toggle="tab">QExpert</a></li>
     <li>
       <a href="#idPaneCitiPesquisarRemessa" data-toggle="tab">Citibank - Remessa</a>
     </li>
     <li>
        <a href="#idPaneCitiPesquisar" data-toggle="tab">Citibank - Retorno</a>
     </li>
</ul>

Updating:

Taking advantage of @Virgilio Novic’s valuable suggestion (as well as @wmengue and @massreuy’s), I changed my code to the following:

Method in PHP:

$tab = 2;
return view('PesquisaView')
 ->with('clientes',$resultadoClientes)
 ->with('advs',$resultadoAdvs)
 ->with('bps',$resultadoBPs)
 ->with('mensagemDoUploadRemessa',$avisoUpload);
 ->with('tab',$tab);

HTML markup:

<ul class="nav nav-tabs" id="myTab">
 <li class="{{$tab==1?'active':''}}"><a href="#idQExpert" data-toggle="tab">QExpert</a></li>
 <li class="{{$tab==2?'active':''}}"><a href="#idPaneCitiPesquisarRemessa" data-toggle="tab">Citibank - Remessa</a>
 </li>
 <li class="{{$tab==3?'active':''}}">
    <a href="#idPaneCitiPesquisar" data-toggle="tab">Citibank - Retorno</a>
 </li>
</ul>   

After executing the method, it returns the value 2 for the $tab variable, the View Blade accepts the parameter and highlights the 'Citibank - Shipment' tab (the middle tab, in the image below, which has the white background), but note that the content, which is a 'form' html, does not appear.

However, if the tabs are clicked, for page exchange, be the first or the third and, back to the second, there yes the form is rendered, as new image below:

That is, the click event does not happen when becoming the 'active' class via code.

Answer 1

You can do a treatment in your code by sending a parameter to the view that will determine the active tab.

<li class="active">

The parameter will tell you when that class should enter or not. Or if you need it to always be fixed, just put it in the tab you need.

Answer 2

Do the following, in your controller, add an additional variable containing the tab you want to mark as active, in this case:

return view('PesquisaView')
->with('clientes',$resultadoClientes)
->with('advs',$resultadoAdvs)
->with('bps',$resultadoBPs)
->with('mensagemDoUploadRemessa',$avisoUpload)
->with('activeTab', $activeTab);

Then create a new view with a treatment to receive this value. For example activeTab.blade.php com the following code:

@if($params['tab'] == 'idQExpert')
    active
@elseif($params['tab'] == 'idPaneCitiPesquisarRemessa')
    active
@elseif($params['tab'] == 'idPaneCitiPesquisar')
    active
@endif

And finally, in its main view, in each of the elements <li> add as follows:

<ul class="nav nav-tabs">
    <li class="@include('layouts/activeTab', ['params' => ['tab' => $activeTab]])">
        <a href="#idQExpert" data-toggle="tab">QExpert</a>
    </li>
    <li class="@include('layouts/activeTab', ['params' => ['tab' => $activeTab]])">
        <a href="#idPaneCitiPesquisarRemessa" data-toggle="tab">Citibank - Remessa</a>
    </li>
    <li class="@include('layouts/activeTab', ['params' => ['tab' => $activeTab]])">
        <a href="#idPaneCitiPesquisar" data-toggle="tab">Citibank - Retorno</a>
    </li>
</ul>

This will probably solve your problem.

Answer 3

Send the information you need tab is the default at the time of loading:

Code

$tab = 2;
return view('PesquisaView')
     ->with('clientes',$resultadoClientes)
     ->with('advs',$resultadoAdvs)
     ->with('bps',$resultadoBPs)
     ->with('mensagemDoUploadRemessa',$avisoUpload);
     ->with('tab',(is_null($tab)) ? 1 : $tab);

---

And in the code of blade do:

Html

<ul class="nav nav-tabs">
  <li @if($tab == 1) {{ 'class="active"' }} @endif ><a href="#">Home</a></li>
  <li @if($tab == 2) {{ 'class="active"' }} @endif ><a href="#">Profile</a></li>
  <li @if($tab == 3) {{ 'class="active"' }} @endif ><a href="#">Messages</a></li>
</ul>