Страница вкладки не отображается правильно

Question

У меня возникли проблемы с моей страницей html, панель вкладок A сверху отображает первую панель правильно, которая является «ПОИСКОМ, ЧТО-ТО, ЧТО-ТО». Но проблема в том, что когда я нажимаю вторую вкладку, «ПОИСК ПО ЧТО-ТО, ПОКАЗАТЬ ЧТО-ТО» идет прямо поверх моей панели вкладок B. Я хочу, чтобы она отображала только поле ввода в панели вкладок B. Я не хочу, чтобы что-то вроде этого :

ПОИСК НЕЧТО
ШОУ НЕЧТО

ПОИСК ME
SHOW ME

<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"> \t 
 
     <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> \t \t \t \t \t \t \t \t \t 
 
       </div> \t \t 
 
      </form> 
 
      </div> \t \t 
 
      <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> \t \t \t \t \t \t \t \t \t \t 
 
       </div> \t \t \t \t \t \t \t 
 
      </form> 
 
      </div> 
 
     </div> 
 
     </div> \t \t \t \t 
 
    </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

1. Вы должны обернуть все вкладки-панели в блок   <div class="tab-content"></div>. Вы   можете использовать this example from the Bootstrap documentation как   a   шаблон.

2. Вы пропустили = в строке <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"> \t 
 

 
     <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> \t \t \t \t \t \t \t \t \t 
 
       </div> \t \t 
 
       </form> 
 
      </div> \t \t 
 
      <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> \t \t \t \t \t \t \t \t \t \t 
 
       </div> \t \t \t \t \t \t \t 
 
       </form> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     
 
     </div> \t \t \t \t 
 
    </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> элемент с идентификатором titleRectangular в вашем коде, был пропущен знак равенства для классов этого элемента.

<div class="col-md-12" id="titleRectangular"> 
    <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> 

Кроме того, в вашем коде я отметил, что эффект затухания ваших вкладок не очень плавный. Причина в том, что вы включили класс .fade на одну вкладку, но не в другую.

<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> 

Смотрите также: Bootstrap Tabs and Pills (W3Schools)

Edit: Я также включают полный код, наряду с Bootply: http://www.bootply.com/Oxcomw9nKA

<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> 
      <div class="col-md-12" id="titleRectangular"> 
       <div class="tab-content"> 
        <div class="tab-pane fade 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>