Question

我的html页面出现问题，上面的标签页面A正确显示第一个窗格，即“搜索某些内容，显示某些内容”。但问题是，当我单击第二个选项卡时，“搜索SOMETHING，显示SOMETHING”就在我的选项卡窗格B的顶部。我希望它只显示选项卡窗格B中的输入框。我不想要这样的东西：

搜索有趣的事   显示某些事情

搜寻我
  显示我

<div class="container">
  <div class="row">
    <br><br>
    <div class="col-xs-9 col-xs-offset-1">
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">	
        <ul class="nav nav-tabs">
          <li class="active"><a href="#a" data-toggle="tab">A</a></li>
          <li><a href="#b" data-toggle="tab">B</a></li>
        </ul>
        <div class"col-md-12" id="titleRectangular">
          <div class="tab-pane active in" id="a">
            <form class="form-search">
              <div class="input">
                <input type="text" name="search" class="search-input" id="search" placeholder="Search Something" style="width: 820px; height: 40px;" autocomplete="off" >
                <h4 id="result-text">Showing something: <b id="search-string">SOMETHING</b></h4>
                <ul id="result"></ul>									
              </div>		
            </form>
          </div>		
          <div class="tab-pane fade" id="b">
            <form class="form-search">
              <div class="input">
                <input type="text" name="search2" class="st-search-input2" id="search2" placeholder="Search Me" style="width: 820px; height: 40px;" autocomplete="off" >
                <h4 id="results-text">Showing me: <b id="search-string">B</b></h4>
                <ul id="results"></ul>										
              </div>							
            </form>
          </div>
        </div>
      </div>				
    </div>
  </div>
</div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Answer 1

您必须将所有制表符包装到<div class="tab-content"></div>块中。您可以使用this example from the Bootstrap documentation作为模板。
您在=行中错过了<div class"col-md-12" id="titleRectangular">。

请检查结果：

<div class="container">
  <div class="row">
    <br><br>
    <div class="col-xs-9 col-xs-offset-1">
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">	

        <ul class="nav nav-tabs">
          <li class="active"><a href="#a" data-toggle="tab">A</a></li>
          <li><a href="#b" data-toggle="tab">B</a></li>
        </ul>
        <div class="col-md-12" id="titleRectangular">
          <div class="tab-content">
            <div class="tab-pane active in" id="a">
              <form class="form-search">
                <div class="input">
                  <input type="text" name="search" class="search-input" id="search" placeholder="Search Something" style="width: 820px; height: 40px;" autocomplete="off" >
                  <h4 id="result-text">Showing something: <b id="search-string">SOMETHING</b></h4>
                  <ul id="result"></ul>									
                </div>		
              </form>
            </div>		
            <div class="tab-pane fade" id="b">
              <form class="form-search">
                <div class="input">
                  <input type="text" name="search2" class="st-search-input2" id="search2" placeholder="Search Me" style="width: 820px; height: 40px;" autocomplete="off" >
                  <h4 id="results-text">Showing me: <b id="search-string">B</b></h4>
                  <ul id="results"></ul>										
                </div>							
              </form>
            </div>
          </div>
        </div>
        
      </div>				
    </div>
  </div>
</div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Answer 2

您的标签的淡入淡出效果不起作用，因为您错过了标签的包装，特别是<div>类，其中包含.tab-content类。

<div class="tab-content">
     <div class="tab-pane active in" id="a">
         <!-- Content of the tab with id="a" -->
     </div>
     <div class="tab-pane fade" id="b">
         <!-- Content of the tab with id="b" -->
     </div>
</div>

请注意，代码中标识为<div>的{{1}}元素也缺少该元素类的等号。

titleRectangular

另外，我在你的代码中注意到你的标签的淡入效果并不是很顺利。原因是您将<div class="col-md-12" id="titleRectangular"> <div class="tab-content"> <div class="tab-pane active in" id="a">  </div> <div class="tab-pane fade" id="b">  </div> </div> </div>类包含在一个选项卡中，但不包含在另一个选项卡中。

.fade

另见：Bootstrap Tabs and Pills (W3Schools)

修改：我还包含完整代码以及Bootply：http://www.bootply.com/Oxcomw9nKA

<div class="col-md-12" id="titleRectangular">
     <div class="tab-content">
         <div class="tab-pane fade active in" id="a">
             <!-- Content of the tab with id="a" -->
         </div>
         <div class="tab-pane fade" id="b">
             <!-- Content of the tab with id="b" -->
         </div>
    </div>
</div>

标签页无法正常显示

2 个答案: