nav-tabs won't change with click in bootstrap

Question

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 1

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