Question

我确信这很简单，但我无法在每个项目标签下显示数据。我在哪里放置for循环以获得正确的选项卡内容结构时遇到问题。我该怎么办呢？

HTML

      <div class="row">
            <div class="col-md-7">        
              <div class="nav-tabs-custom">
              <ul class="nav nav-tabs">
                   @foreach($items as $item)

              <li><a href="#tab_1" data-toggle="tab" >{!!$item->name!!}</a></li>

              </ul>
               //data for a item tab is displayed here -- content
              <div class="tab-content">
              <div class="tab-pane active" id="tab_1">

              @foreach($item->stuff as $data)

              <label class="mylabel" >  {{$data->name}} </label>
              @endforeach

              @endforeach

               </div> 

               </div>

              </div>

            </div>

Answer 1

您需要将项目循环两次，一次构建标签ul列表，然后再显示每个标签的内容。

类似的东西：

<div class="row">
    <div class="col-md-7">                
        <div class="nav-tabs-custom">
            // Links for the tabs
            <ul class="nav nav-tabs">
                @foreach($items as $key => $item)
                    <li><a href="#tab_{{ $key }}" data-toggle="tab" >{!! $item->name !!}</a></li>
                @endforeach 
            </ul>

            // Data for the tabs
            <div class="tab-content">
                @foreach($items as $key => $item)
                    <div class="tab-pane{{ $key == 1 ? ' active' : '' }}" id="tab_{{ $key }}">
                        @foreach($item->stuff as $data)
                            <label class="mylabel">{{ $data->name }}</label>
                        @endforeach
                    </div>    
                @endforeach
            </div>
        </div>
    </div>
</div>

将通用数据显示为选项卡内容

1 个答案: