はジャンゴ

Question

をクリックした私は2つのタブがあります。私の親タブは、私の子タブが車の詳細が含ま車

のリストが含まれ、パフォーマンス、

を提供しています

• を

  表示されている親タブに応じて異なるデータを表示しようとしています。

  期待される結果：

  parent tab 
  
  car one | car two 
  
  
  child tab 
  
  car details | performance | offers 
  

  結果が表示され、ここで

  tabs.html

  <!-- parent tab --> 
  
  <ul class="nav nav-tabs"> 
       {% for car in cars %} 
       {% if forloop.first %} 
       <li class="active"><a href="#carDetails" data-toggle="tab">{{car.name}}</a></li> 
       {%else%} 
       <li><a href="#carDetails" data-toggle="tab">{{car.name}}</a></li> 
       {%endif%} 
       {%endfor%} 
      </ul> 
  
  <!-- child tab --> 
  
  <ul class="nav nav-tabs"> 
       <li class="active"><a href="#carDetails" data-toggle="tab">Car Details</a></li> 
       <li><a href="#performance" data-toggle="tab">Performance</a></li> 
       <li><a href="#offers" data-toggle="tab">Offers</a></li> 
      </ul> 
  
  <!-- for loop --> 
  
  {% for car in cars.id %} 
      <tr> 
       <td class=" vertical-center"> 
        <a href="">{{ car.name }}</a> 
       </td> 
      </tr> 
  
  {% endfor %} 
  

Answer 1

詳細タブは、HTMLに入れなければならないすべての車、および最初のタブのデフォルト設定表示され、他はデフォルトで非表示になります。あなたはJavascriptで表示するためにタブを変更します。