Wie wird der Tab aktiv auf der Seite geladen? -laravel

Question

Wie kann ich meine erste Auswahl erhalten, wenn ich auf der Seite lande? Wenn ich auf der Seite lande, muss ich vorher einen Tab auswählen, aber gibt es eine Möglichkeit, dass der erste Tab bereits ausgewählt ist, wenn ich auf der Seite lande?

Wenn ich die Seite lade, habe ich meine Tabs angezeigt, aber keine von ihnen sind aktiv, bis ich auf sie klicke. Gibt es eine Möglichkeit, die erste Registerkarte aktiv zu haben, während die Seite geladen wird.

HTML

<div class="row"> 
     <div class="col-md-9"> 

      <div class="nav-tabs-custom"> 

      <ul class="nav nav-tabs"> 
      @foreach($hotels as $hotel) 

       <li ><a href="#tab_{{ $hotel->id }}" data-toggle="tab" >{!!$hotel->name!!}</a></li> 
       @endforeach 


      </ul> 
      <div class="tab-content"> 
      @foreach($hotels as $hotel) 

       <div class="tab-pane active" id="tab_{{ $hotel->id }}"> 

       @foreach($hotel->waiters as $waiter) 


      <label class="mylabel" > {{$waiter->name}} </label> 

      </div> 
      @endforeach  
       </div>  

      </div> 

      </div> 

     </div> 

Answer 1

Ich denke, Ihr Problem in der aktiven Klasse ist, die jedes Register hinzugefügt wird es für einen wie dies gerade sein soll:

<div class="row"> 
    <div class="col-md-9"> 

     <div class="nav-tabs-custom"> 

     <ul class="nav nav-tabs"> 
     @foreach($hotels as $hotel) 

      <li ><a href="#tab_{{ $hotel->id }}" data-toggle="tab" >{!!$hotel->name!!}</a></li> 
      @endforeach 


     </ul> 
     <div class="tab-content"> 
     @foreach($hotels as $key => $hotel) 
      <div class="tab-pane {{ $key==0 ? 'active' : ''}}" id="tab_{{ $hotel->id }}"> 
       @foreach($hotel->waiters as $waiter) 
        <label class="mylabel" > {{$waiter->name}} </label> 
       @endforeach  
     </div> 
     @endforeach  
      </div>  

     </div> 

    </div> 
</div> 

Answer 2

Dies ist eigentlich nicht realted zu PHP oder Laravel, diese Frage ist mehr mit css-Bootstrap und jquery.You kann unter js zu Ihrem Code hinzufügen und entfernen aktive aktive Klasse von hardcodiert Blade-HTML, ich denke, das ist eine mehr Stütze er Lösung:

$(document).ready(function(){ 
    $('.tab-pane').each(function(tab,index){ 
    if(index==0){ 
    tab.addClass('active'); 
    } 
    }); 
});