在线研究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
<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,
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>
IMAGE</a></li>
<li><a href="#tab2" data-toggle="tab"><span class="glyphicon glyphicon-link" id="glyph-align"></span>
SOCIAL</a></li>
<li><a href="#tab3" data-toggle="tab"><span class="glyphicon glyphicon-align-left" id="glyph-align"></span>
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
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
<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 -->
2 回答
我认为你已将＃tab3放入＃tab2 div
而不是这个：
正确到这个：
这是DEMO
您错过了关闭
<small>标签 . 它现在正在运作 .检查DEMO