Question

当我登陆页面时，如何才能获得我的第一个选择？当我登陆页面时，我必须先选择一个标签，但是当我登陆页面时，我是否可以选择第一个标签？

当我加载页面时，我显示了我的标签但是在我点击它们之前它们都没有激活。有没有办法在页面加载时激活第一个标签。

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

我认为你的问题出在活动类中，它被添加到每个标签中，它应该是这样的：

<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

这实际上并不适用于php或laravel，这个问题与css-bootstrap和jquery更相关。你可以在你的代码中添加以下js并从hardcoded blade-html中删除活动的 active 类，我认为这是一个更合适的解决方案：

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

如何在页面加载-laravel上激活选项卡

2 个答案: