Question

我为Fixtures和Results制作了两个标签，但是当我点击Result选项卡时，没有任何变化，它仍保留在Fixtures选项卡上！这是我的代码：

<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

nav-tabs在单击引导程序时不会发生变化

1 个答案: