Question

我在网上研究3小时后放弃了寻找答案。我希望有人可以帮助我。我正在使用带有jquery 1.11.1的Bootstrap 3.3.1。总共，我有3个标签，每个标签都有不同的内容。当我从tab1切换到tab2时，它完美地工作。当我从tab2切换到tab3时，tab3似乎显示与tab2完全相同的内容，而tab3中没有内容。在我将内容添加到tab3后，文本和文本字段显示为关闭....意味着tab3将确切内容显示为tab2并在我的tab-content之外显示新内容。（将其放在标签内容区域的下方和外部）。我不确定原因是什么？感谢您的输入/帮助。

这是我的代码：

<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

我认为你已将＃tab3放入＃tab2 div

而不是：

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

纠正于此：

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

这是DEMO

Answer 2

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

检查DEMO

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

Bootstrap 3选项卡 - Tab1到Tab 2工作。 Tab2到Tab3没有

2 个答案: