Question

创建一个在打开不同标签时具有不同字段的表单。我尝试使用Bootstrap的可切换标签，看起来它正常工作，但是当您点击另一个标签时，它没有显示应该显示的其他html在那特定的div。

这是我的HTML：

<form name="quote" id="price-quote">
  <div class="container">
    <div id="service-tabs" class="container">
        <ul class="nav nav-pills">
            <li class="active"><a href="#carpet-cleaning" data-toggle="tab">Carpet Cleaning</a></li>
            <li><a href="#upholstery-cleaning" data-toggle="tab">Upholstery Cleaning</a></li>
                </ul>

          <div class="tab-content clearfix">
            <div class="tab-pane active" id="1">
                <h3>Carpet Cleaning Options</h3>
                    <!--how many bedrooms-->
                    <label class="control-label" for="carpet_cleaning">Bedrooms</label><br>
                        <select class="form-control-1" id="carpet_cleaning">
                            <option value="0">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                        </select>
             </div>

           <div class="tab-pane" id="2">
                <h3>Upholstery Cleaning Options</h3>
                    <!--how many dining room chairs-->
                    <label class="control-label" for="dining_chairs_cleaning">Dining Room Chairs (each)</label><br>
                        <select class="form-control-1" id="dining_chairs_cleaning">
                            <option value="0">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                        </select>
           </div>
      </div>
   </div>
 </div>
</form>

这里有一个简洁视角的JS小提琴：https://jsfiddle.net/z2kt4hv0/

我也尝试使用jQuery，但我认为使用Bootstrap会更好，因为我已经将它用于页面的其他部分。一切似乎都应该有效，但另一个标签不会显示正确的内容。任何帮助都会很棒，谢谢。

Answer 1

id必须位于相应的tab-pane上。更新选项卡窗格名称..

<div class="tab-pane active" id="carpet-cleaning">

和

<div class="tab-pane" id="upholstery-cleaning">

http://www.bootply.com/8fPWTNGceE

Answer 2

标签链接的<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="Working"> Working </div> <div id="notWorking">notWorking</div>属性需要与要显示的部分的href匹配。顺便说一下，id＆＃t}不能以（或只是）数字开头。

＆＃13;

id

＆＃13;

Answer 3

因此，您不应该将整个容器包装在表单元素中。而只是将它包装在实际的表单元素（即您的选择和标签标签）周围。以下是您尝试做的一个实例：

＆＃13;

pip3

＆＃13;

注意：您需要Bootrap.css，Bootstrap.js和jQuery.js才能实现此目的。

只需将pip2 div中的内容替换为您想要的内容即可。您可以在W3Schools上查看使用标签的完整指南。

使用Bootstrap可切换选项卡创建HTML表单，内容未显示

3 个答案: