Peyman Omidi Peyman Omidi - 5 days ago 7
HTML Question

nav-tabs won't change with click in bootstrap

I made two tabs for Fixtures and Results, but when I click on Result tab nothing has change and it remains on Fixtures tab !
This 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 show its content ?

Answer

You placed #service-one and #service-two in two different tab contents. That is why its not working.

Place them inside #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

Comments