Как свернуть содержимое панели вкладок в переключаемых вкладках после просмотра?

Question

На вкладках Togglable при загрузке страницы содержимое панели не отображается. но когда мы нажимаем на любую из вкладок, соответствующий контент появляется на экране и продолжает меняться, а мы нажимаем на другие вкладки. Но как только содержимое вкладок появляется на экране, оно всегда остается на экране, оно изменяется при щелчке по другим вкладкам, но никогда не исчезает, пока вся веб-страница не будет обновлена ​​снова. Пожалуйста, руководство, есть ли способ заставить контент исчезнуть.

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>

Answer 1

Просто нужно добавить «активный» класс к той панели, которую вы хотите видеть при загрузке. То же, что и вкладки. Смотри ниже

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>