nav-tabs не будут меняться при щелчке в bootstrap

Question

Я сделал две вкладки для светильников и результатов, но когда я нажимаю на вкладку «Результаты», ничего не изменилось, и она остается на вкладке «Светильники»! Это мой код:

<section> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-12"> 

      <ul id="myTab" class="nav nav-tabs nav-justified"> 
       <li class="active"><a href="#service-one" data-toggle="tab">Fixtures</a> 
       </li> 
       <li class=""><a href="#service-two" data-toggle="tab">Results</a> 
       </li> 
      </ul> 

      <div id="myTabContent" class="tab-content"> 

       <div class="tab-pane fade active in" id="service-one"> 
        <table class="table table-condensed table-hover"> 
         <tbody> 
          <tr> 
          <td class="col-md-2"><img src="img/leagues/bpl-s.png" alt="bpl" class="img-rounded"></td> 
          <td class="col-md-2">Manchester United</td> 
          <td class="col-md-1">vs</td> 
          <td class="col-md-2">Tottenham</td> 
          <td class="col-md-2">12:45</td> 
          </tr> 
         </tbody> 
        </table> 
       </div> 
      </div> 
      <div id="myTabContent" class="tab-content"> 
       <div class="tab-pane fade in" id="service-two"> 
        <table class="table table-condensed table-hover"> 
         <tbody> 
          <tr> 
          <td class="col-md-2"><img src="img/leagues/bpl-s.png" alt="bpl" class="img-rounded"></td> 
          <td class="col-md-2">Manchester United</td> 
          <td class="col-md-1">5-2</td> 
          <td class="col-md-2">Tottenham</td> 
          <td class="col-md-2">Report</td> 
          </tr> 
         </tbody> 
        </table> 
       </div> 
      </div> 
     </div> 
     </div> 
    </div> 

Как я могу это исправить, чтобы переключаться между вкладками и показать его содержимое?

Answer 1

Вы разместили #service-one и #service-two в двух разных содержаниях вкладки. Вот почему он не работает.

Место их в #myTabContent

<ul class="nav nav-tabs nav-justified" id="myTab"> 
    <li class="active"> 
     <a data-toggle="tab" href="#service-one">Fixtures</a> 
    </li> 

    <li class=""> 
     <a data-toggle="tab" href="#service-two">Results</a> 
    </li> 
</ul> 

<div class="tab-content" id="myTabContent"> 
    <div class="tab-pane fade active in" id="service-one"> 
     ..... 
    </div> 

    <div class="tab-pane fade in" id="service-two"> 
     ..... 
    </div> 
</div> 

Вот это demo