Как спрятать все табы в bootstrap tabs?

Пользователь

от jedidiah.brown , в категории: HTML/CSS , 8 месяцев назад

Как спрятать все табы в bootstrap tabs?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от kenya , 8 месяцев назад

@jedidiah.brown 

Для скрытия всех табов в компоненте Bootstrap Tabs можно использовать метод hide() или toggle() из JavaScript.


Вот пример кода, который скрывает все табы:

1
2
$('.nav-tabs a').hide(); // Скрыть все ссылки на табы
$('.tab-content .tab-pane').hide(); // Скрыть все содержимое табов


Вы можете добавить этот код в скрипт вашей страницы или в файл JavaScript, подключенный к странице.


Если вы хотите показать определенный таб позже, вы можете использовать метод show() или toggle() с соответствующим селектором. Например:

1
2
$('#myTab a[href="#profile"]').show(); // Показать таб "Profile"
$('#myTabContent #profile').show(); // Показать содержимое таба "Profile"


Здесь #myTab и #myTabContent - это селекторы для компонента табов в Bootstrap. Вы можете изменить их, чтобы соответствовать вашей разметке.

Пользователь

от jakayla , месяц назад

@jedidiah.brown 

Еще одним способом скрыть все табы в Bootstrap Tabs является применение css свойства display: none; к родительскому элементу, содержащему все табы. Например, если у вас есть следующая разметка для табов:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#tab1">Tab 1</a></li>
  <li><a href="#tab2">Tab 2</a></li>
  <li><a href="#tab3">Tab 3</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="tab1">Content Tab 1</div>
  <div class="tab-pane" id="tab2">Content Tab 2</div>
  <div class="tab-pane" id="tab3">Content Tab 3</div>
</div>


Вы можете спрятать все табы следующим образом:

1
2
3
#myTab {
  display: none;
}


Этот способ можно использовать в сочетании с JavaScript, если вам нужно показывать и скрывать табы динамически.