ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Адаптивные вкладки (табы) на JavaScript

Адаптивные вкладки (табы) на JavaScript

Адаптивные вкладки (табы) на JavaScript
В этом руководстве представлены адаптивные вкладки (табы), что созданы с помощью CSS и также JavaScript, с красивым переходом цветового эффекта. Такой стиль можно назвать стандартным, ведь по цветовой палитре здесь присутствует несколько оттенков, и по стилистике можно заметить, что вкладки не оформлены. Так как сделаны по своему формату под многие тематические сайты или блоги.

Ведь основном они идут для того, чтоб скрыть информацию или плеер, что можно наблюдать на тематике для просмотра кино в онлайн режиме. Где вашему вниманию еще одна чистая вкладка, которая будет автоматически конвертирована в интерфейс, как в горизонтальном, так и вертикальном положение аккордеона, что автоматически перейдут под мобильные аппараты.

Отлично продуманные навигационные вкладки не только помогают пользователям узнать, где и какая информация находится, а также служит навигацией по внутренним страницам.

Также проверяя на работоспособность и на мобильные гаджет, то разложу изображение, как реально выглядит на разном формате и безусловно ширине монитора или мобильного экрана.

Рассмотрим при открытие страницы или сайта.

Делаем адаптивные табы

Здесь наводит на одну из предоставленных разделов, где меняется оттенок.

Как создать адаптивные вкладки (табы) с помощью CSS

Здесь можно заметить, что просматриваем с мобильных приложениях.

Адаптивный компонент вкладки

Вероятнее всего, что просмотр проходит самого небольшого экрана.

Вкладки можно использовать в мобильном режиме

Установочный процесс:

HTML

Код
<div class="adaptivno-vkladok">
<div class="adapulivna-pukelamed">
  <button class="makupus-lansedage" onclick="openTab(event, 'HTML')">HTML</button>
  <button class="makupus-lansedage" onclick="openTab(event, 'CSS')">CSS</button>
  <button class="makupus-lansedage" onclick="openTab(event, 'PHP')">PHP</button>
  </div>

  <div id="HTML" class="luagedesined">
  <h3>HTML</h3>
  <p>Первое описание</p>
  </div>

  <div id="CSS" class="luagedesined">
  <h3>CSS</h3>
  <p>Второе тематическое описание</p>  
  </div>

  <div id="PHP" class="luagedesined">
  <h3>PHP</h3>
  <p>Третье краткое описание</p>
  </div>
</div>

CSS

Код
.adaptivno-vkladok{
  width:70%;
  margin:auto;
}
.adapulivna-pukelamed {
  background: #6b1075;
  overflow: hidden;
}
.adapulivna-pukelamed button {
  float: left;
  border: none;
  outline: none;
  font-weight: bold;
  cursor: pointer;
  background-color: inherit;
  padding: 15px 20px;
  transition: 0.2s;
  font-size: 17px;
  color: #f6f3f7;
}

.adapulivna-pukelamed button:hover {
  background-color: #4462b3;
  color: #f7ffcc;
}

.adapulivna-pukelamed button.operativen {
  background-color: #0080ff;
  color: #111;
}

.luagedesined {
  display: none;
  padding: 5px 15px;
  border: 1px solid #a59f9f;
  border-top: none;
  background-color: #e6e8ef;
}

@media screen and (max-width: 600px) {
  .adapulivna-pukelamed button {
  color: #cce4f5;
  text-decoration: none;
  font-size: 15px;
  width:100%;
  }
}

JS

Код
function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("luagedesined");
  for (i = 0; i < tabcontent.length; i++) {
  tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("makupus-lansedage");
  for (i = 0; i < tablinks.length; i++) {
  tablinks[i].className = tablinks[i].className.replace(" operativen", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}

Современная и удобная навигация, что идет виде вкладок, станет отличным решением как для функциональности на самом сайте, так и в самом материале, что можно часто встретить. Где построена с учетом потребностей мобильных устройств и поддерживает горизонтальное и вертикальное позиционирование.

Демонстрация
19 Сентября 2019 Загрузок: 2 Просмотров: 1903 Комментариев: (5)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 5
ZhRoman
ZhRoman 18 Мая 2023 21:341
0
Вот это отличный вариант. Я в редакторе попробовал встроить во вкладки видео и поэкспериментировал с шириной. Вкладки отлично отрабатывают. Как сделать так что бы при открытии страницы была не пустая вкладка а первая открыта. Я так понимаю за это отвечает JS, но не знаю какая часть кода.
Kosten
Kosten 18 Мая 2023 21:382
0
Понял ваш вопрос, здесь реально не знаю, ведь по сути должно первое окно открыто. Нужно на демо странице посмотреть, если получится отпишу.
ZhRoman
ZhRoman 18 Мая 2023 21:413
0
Да там при открытии демо видно только вкладки, но контент не показывает пока на вкладку не нажать.
ZhRoman
ZhRoman 19 Мая 2023 08:384
0
Разобрался с кодом. Для того что бы открывалась первая вкладка а не пустая при открытии страницы, я дописал в конце JS это.
Код
  document.addEventListener("DOMContentLoaded", function(event) {
   document.querySelector('.tablinks:first-child').click();
});


этот таб
Подогнал по стилю сайта и изменил концовку JS что бы открывалась сразу первая вкладка при открытии страницы. В html весь плеер окружил условным оператором, на тот случай если нет видео в ВК то будет стандартный плеер отображаться без табов.
Видео ВК добавляется через доп поле, но не всем iframe, а только ссылкой из него. К сожалению это костыль, но иначе пока не как, так как доп поля в системе имеют ограничение по длине символов. Приложу ниже код.
HTML
Код
<!-- <плеер> -->   
<?if($OTHER1$)?>
   <div class="tab">
   <button class="tablinks" onclick="openTab(event, 'YouTube')">YouTube плеер</button>
   <button class="tablinks" onclick="openTab(event, 'VK')">VK плеер</button>
   </div>
    
   <div id="YouTube" class="tabcontent">
   <div class="thumb-wrap">
   $EMBOBJECT$
   </div>
   </div>
    
   <div id="VK" class="tabcontent">
   <div class="thumb-wrap">
<iframe src="$OTHER1$" width="853" height="480" allow="autoplay; encrypted-media; fullscreen; picture-in-picture;" frameborder="0" allowfullscreen></iframe>
   </div>
   </div>
    
   <?else?>   
<div class="thumb-wrap">
$EMBOBJECT$
</div>
<?endif?>   
<!-- <плеер> -->


CSS
Код
/* два плеера */
.tab {
   background: #ffffff;
   overflow: hidden;
}
.tab button {
   float: left;
   border: none;
   outline: none;
   font-weight: bold;
   cursor: pointer;
   background-color: inherit;
   padding: 15px 20px;
   transition: 0.2s;
   font-size: 17px;
   color: #000000;
}

.tab button:hover {
   background-color: rgb(167, 167, 167);
   color: #111;
}

.tab button.active {
   background-color: rgb(223, 223, 223);
   color: #111;
}

.tabcontent {
   display: none;
}

.thumb-wrap {
   position: relative;
   padding-bottom: 56.25%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */
   height: 0;
   overflow: hidden;
}
.thumb-wrap iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border-width: 0;
   outline-width: 0;
   margin: 0px;
}
/* два плеера */


JS
Код
function openTab(evt, tabName) {
   var i, tabcontent, tablinks;
   tabcontent = document.getElementsByClassName("tabcontent");
   for (i = 0; i < tabcontent.length; i++) {
   tabcontent[i].style.display = "none";
   }
   tablinks = document.getElementsByClassName("tablinks");
   for (i = 0; i < tablinks.length; i++) {
   tablinks[i].className = tablinks[i].className.replace(" active", "");
   }
   document.getElementById(tabName).style.display = "block";
   evt.currentTarget.className += " active";
   }

   document.addEventListener("DOMContentLoaded", function(event) {
   document.querySelector('.tablinks:first-child').click();
});
-SAM-
-SAM- 20 Мая 2023 00:505
+1
UPD.: мой коммент неактуален (можно удалить), ибо содержимое по ссылке ниже было перенесено сюда, где ему самое место.
В качестве примера использования текущих вкладок для вывода нескольких видеоплееров, также можете посмотреть ЭТОТ комментарий, где уже поставлены условные операторами системы uCoz.

Войдите:
avatar