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

Question

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

这是我的 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 fiddle 以获得更简单的视图：https://jsfiddle.net/z2kt4hv0/

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

Answer 1

选项卡链接的href 属性需要与要显示的部分的id 匹配。顺便说一句，id 不能以（或只是）数字开头。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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="carpet-cleaning">
          <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="upholstery-cleaning">
          <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>

Answer 2

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

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

和

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

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

Answer 3

因此，您不应该将整个容器包装在表单元素中。而是仅将其包裹在实际的表单元素（即您的选择和标签标签）周围。这是您尝试做的一个工作示例：

<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-pills" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="pill">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">Home</div>
    <div role="tabpanel" class="tab-pane" id="profile">Profile</div>
    <div role="tabpanel" class="tab-pane" id="messages">Messages</div>
    <div role="tabpanel" class="tab-pane" id="settings">Settings</div>
  </div>

</div>

注意：您需要 Bootrap.css、Bootstrap.js 和 jQuery.js 才能使其工作。

只需将.tab-pane div 中的内容替换为您想要的任何内容。您可以在 W3Schools 上查看使用标签的完整指南。