Всем приветы и ответы!
Как вы понимаете, речь пойдёт о табах на сайте, которые легко переключать между собой в пару кликов мыши и лицезреть нужную информацию, без перезагрузки страницы, как это принято в многих решениях.
Самое главное, что на страницу можно становить несколько блоков с табами.
Давайте посмотрим на решение!
Установим JS:
Во-первых, у вас в шапке сайта перед закрывающим тегом </head> должна быть установлена библиотека jquery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Во-вторых, установить основной js который будет отвечать за переключение табов, для этого в самый низ страницы перед закрывающим тегом </body> ставим js:
<script>
$(function () {
function makeTabs(contId) {
var tabContainers = $('#'+contId+' div.tabs > div');
tabContainers.hide().filter(':first').show();
$('#'+contId+' div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('#'+contId+' div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
}
makeTabs('tabs-1');
makeTabs('tabs-2');
});
</script>
Обратите пожалуйста своё внимание на последние строчки кода:
tabs-1 - табы №1
tabs-2 - табы №2
Установим HTML:
Создаём основную ячейку div (id="tabs-1"), которая будет отвечать за номер табов!
Если вы захотите добавить несколько табов, то следует изменить данный ID на соответствующую цифру, в выше предоставленном скрипте в конце кода, добавить строку с соответствующим номером таба, например makeTabs('tabs-2'); и div (id="tabs-2")
<!-- Начало тегов табы -->
<div id="tabs-1">
<div class="tabs">
<ul class="tabNavigation">
<li><a href="#first">Вкладка 1</a></li>
<li><a href="#second">Вкладка 2 </a></li>
<li><a href="#third">Вкладка 3</a></li>
<li><a href="#four">Вкладка 4</a></li>
</ul>
<div id="first" class="tab_content">
Доброе дело совершается с усилием, но когда усилие повторено несколько раз, то же дело становится привычкой.
</div>
<div id="second" class="tab_content">
Успех состоит в том, чтобы сфокусировать всю энергию, заключенную в вас, на той цели, которую вы так страстно желаете достичь
</div>
<div id="third" class="tab_content">
Достоинства человека должны определяться его делами, а не тем, что о нем говорят.
</div>
<div id="four" class="tab_content">
Счастье – это хорошее здоровье и плохая память
</div>
</div>
</div>
<!-- /Конец тегов табы -->
CSS стили:
Теперь нам следует для правильного отображение вкладок прописать следующие css стили в файле под названием style.css:
/* Табы
------------------------------------------*/
#tabs-1 {
text-align:center;
margin: 0px 0px 35px 0px;
}
.tabNavigation {
list-style:none;
margin: 0;
padding: 0;
}
.tabNavigation li {
display: inline;
margin: 0px 5px 0px 5px;
}
.tabNavigation li a {
color: #555;
background: #f2f4f8;
border-top: 1px solid #e0e4eb;
border-right: 1px solid #e0e4eb;
border-left: 1px solid #e0e4eb;
padding: 6px 10px 6px 10px;
}
.tabNavigation li a.selected,ul
.tabNavigation li a.selected:hover {color:#555; background:#fff; border-bottom: 1px solid #fff; }
.tabNavigation li a:hover {color: #555; background:#fff;}
.tabNavigation li a:focus {outline: 0;}
.tab_content {
overflow: hidden;
text-align:left;
border-top: 1px solid #e0e4eb;
padding: 30px 0px 30px 0px;
margin-top: 6px;
font-family: Verdana,Arial,Helvetica, sans-serif;
font-size: 16px;
color:#555;
line-height: 1.8;
}
Одним из плюсов данных вкладок является тот факт, что пользователю видно, на какой вкладке он находиться и на какую вкладку он хочет перейти.
На этом всё, спасибо за внимание!
А Вы оставите комментарий первым?