Bootstrap3 选项卡 - Tab1 到 Tab2 有效。 Tab2 到 Tab 3 没有答案

【问题标题】：Bootstrap3 Tabs - Tab1 to Tab2 works. Tab2 to Tab 3 does notBootstrap3 选项卡 - Tab1 到 Tab2 有效。 Tab2 到 Tab 3 没有
【发布时间】：2015-02-01 23:52:08
【问题描述】：

经过 3 小时的在线研究，我已放弃寻找答案。我希望有人可以帮助我。我正在使用带有 jquery 1.11.1 的 Bootstrap 3.3.1。我总共有 3 个选项卡，每个选项卡都有不同的内容。当我从 tab1 切换到 tab2 时，它工作得很好。当我从 tab2 切换到 tab3 时，tab3 似乎显示的内容与 tab2 完全相同，但 tab3 中没有内容。在我将内容添加到 tab3 之后，文本和文本字段就消失了......这意味着 tab3 将确切的内容显示为 tab2 并在我的选项卡内容之外显示新内容。（将其放在选项卡内容区域的下方和外部）。我不确定可能是什么原因？感谢您的意见/帮助。

这是我的代码：

<div class = "row">
  <div class = "col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <h2 id = "center">PLUS HUNDREDS OF PRIZES INCLUDING<br/><a href="http://www.shop.canada.nhl.com/home/index.jsp">Shop.Canada.NHL.com</a> GIFT CARDS AND MONDELEZ SNACKS.</h2>
    <h3 id = "center-cap">share how you get game ready by photo,<br/> video or written description to be entered daily.</h3>
    </div>
</div>

<div class="row" id="left-col">
  <div class = "col-lg6 col-md-6 col-sm-6 col-xs-6">

    <h4 id="text-cap">submit for a chance to win:</h4>

    <!--Tabs-->
<div class="tabbable">         
   <ul class="nav nav-tabs" id="myTab">
     <li class="active"><a href="#tab1" data-toggle="tab"><span class="glyphicon glyphicon-picture" id="glyph-align"></span><br/>IMAGE</a></li>
     <li><a href="#tab2" data-toggle="tab"><span class="glyphicon glyphicon-link" id="glyph-align"></span><br/>SOCIAL</a></li>
     <li><a href="#tab3" data-toggle="tab"><span class="glyphicon glyphicon-align-left" id="glyph-align"></span><br/>TEXT</a></li>
   </ul>
<div class="tab-content">

   <!---IMAGE tab -->
   <div class="tab-pane active" id="tab1">
    <h4 id="center-cap-grey">browse from your desktop.</h4>

    <!-- File Upload Button-->
    <div class="fileupload fileupload-new" data-provides="fileupload">
    <span class="btn btn-primary btn-file">
    <input type="file" ></span>
    <span class="fileupload-preview"></span>
    </div>
    <div id="comment-box">
    <h4 id="text-cap-grey">share your story<br/> for an entry:</h4>
    <textarea rows="3" cols="38" maxlength="200" placeholder="(MAXIMUM OF 200 WORDS)" id="comments"></textarea>
     </div>                        
</div><!-- .tab-pane tab1 -->

    <!--SOCIAL LINK tab-->
    <div class="tab-pane" id="tab2">
    <h4 id="text-cap-grey2">paste your social medial link here:</h4>
    <input type="url" name="socialLink" placeholder="http://" size="35" id="socialLink" />
    <h4 id="text-cap-grey">social media<br/><small>(maximum of 200 words)<small></h4>
    </div><!-- .tab-pane tab2 -->

    <!-- TEXT tab -->
    <div class="tab-pane" id="tab3">
    <textarea rows="5" cols="38" maxlength="200" placeholder="(MAXIMUM OF 250 WORDS)" id="comments"></textarea>
    <h4 id="text-cap-grey">tell us more about you.</h4>
    </div><!-- .tab-pane tab3 -->

    </div><!-- .tab-content -->
 </div><!-- .tabbable -->

</div><!-- .col -->
</div><!-- .row -->

【问题讨论】：

始终先通过验证器运行您的 HTML。

标签： jquery tabs twitter-bootstrap-3 toggle

【解决方案1】：

我认为您已将#tab3 放入#tab2 div 中

而不是这个：

<small>(maximum of 200 words)<small>

更正如下：

<small>(maximum of 200 words)</small>

这是DEMO

【讨论】：

叹息……就这么小（双关语）和简单。大声笑谢谢你！我想我只是需要更多的关注这个。 :)

【解决方案2】：

您错过了关闭<small> 标记。它现在正在工作。

查看DEMO

<small>(maximum of 200 words)</small>

【讨论】：