引导程序3选项卡 - 选项卡1到选项卡2工作。 Tab2到Tab 3不是

Question

我放弃了在线研究3小时后寻找答案。我希望有人能帮助我。我使用Bootstrap 3.3.1和jQuery 1.11.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 --> 

Answer 1

你错过了关闭<small>标签。它正在工作。

检查DEMO

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

Answer 2

我想你已经把＃TAB3到＃TAB2 DIV

取而代之的是：

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

正确的是：

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

这是一个DEMO