Navigation tab doesn't change with click in bootstrap
Man · （（Peyman Omidi）
I've created two tabs for "Fixtures" and "Results", but when I click on the "Results" tab, nothing changes and it remains in the "Fixtures" tab! Here is my code:
<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>
How can I fix this to switch between tabs and display their content?
dhiraj
You place and #service-onein #service-twotwo different tab content. That's why it doesn't work.
put it in#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>
Here is a demo