БлогNot. Меню из вкладок на web-странице

Меню из вкладок на web-странице

На этот раз - менюшка из горизонтальных кликабельных вкладок-табов, вот такая (вы её видите, если в браузере включён яваскрипт и это не трансляция, которая вырезала скрипты):

  • Хоронили тёщу...
  • Что такое Юриюрич?
  • Lorem ipsum?

Порвали три баяна...

Смеялась даже обезьяна

  • Коммуняка
  • Волчара
  • Античитер
  • Запутинка

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Рыба, рыба!

Всё, сказанное про баян, верно и для этого кода. Ниже приводится полный листинг документа HTML5, предполагается, что он будет сохранён в кодировке Юникода utf-8.

<!DOCTYPE html>
<html lang="ru">
<head>
 <title>TAB'ы на странице</title>
 <meta charset="utf-8">

 <style>
  #tabs {
  width: 600px;
  margin: 0 auto;
  border: 1px solid #339933;
  border-radius: 10px;
  padding: 10px;
  font-family: sans-serif;
 }
 .tabsList {
  list-style-type: none;
  padding-left: 0px;
  margin: 0;
  line-height: 32px;
  display: inline-block;
  padding-bottom: 1px;
  margin-bottom: 5px;
  border-radius: 5px;
 }
 .tabsItem {
  display: inline-block;
  color: #336633;
  white-space: nowrap;   
  font-family: sans-serif;
  font-weight: bold;
  font-size: 16px;
  padding: 0px 12px;
  background-color: #dddddd;
  cursor: pointer;
  border-radius: 8px 0;
  transition: all .5s;
 }
 .tabsItem.select {
  color: #fff;
  background: #339933;
 }
 .tabsText {
  display: none;
  font-size: 12px;
  font-family: sans-serif;
  text-align: justify;
 }
 .tabsText.select {
  display: block;
 }
 </style>

</head><body>	

 <div id="tabs">
  <ul class="tabsList">
   <li class="tabsItem select" data-id="tabs-1">Хоронили тёщу...</li>
   <li class="tabsItem" data-id="tabs-2">Что такое Юриюрич?</li>
   <li class="tabsItem" data-id="tabs-3">Lorem ipsum?</li>
  </ul>

  <div class="tabsText select" id="tabs-1">
   <p>Порвали три баяна...</p>
   <p>Смеялась даже обезьяна</p>
  </div>
  <div class="tabsText" id="tabs-2">
   <ul>
     <li onclick="alert('Да-да');">Коммуняка</li>
     <li onclick="alert('Нет-да');">Волчара</li>
     <li onclick="alert('Да-нет');">Античитер</li>
     <li onclick="alert('Да-да-нет-да');">Запутинка</li>
    </ul>
  </div>
  <div class="tabsText" id="tabs-3">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
    nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
    sunt in culpa qui officia deserunt mollit anim id est laborum. 
    <a href="https://ru.wikipedia.org/wiki/Lorem_ipsum" target="_blank">Рыба, рыба!</a></p>
  </div>
 </div>
 <script>
  var tabs = document.getElementById('tabs'); //получить if главного раздела вкладок
  createTabs (tabs); //и создать их

  function createTabs (root) {
   var items = root.getElementsByClassName('tabsItem');
   var texts = root.getElementsByClassName('tabsText');

   root.addEventListener ('click', go);

   function go (event) {
    var targetEl = event.target;
    if (targetEl.className !==  'tabsItem') return;
    var select = 'tabsItemSelected';
    for (var i = 0; i < items.length; i++) {
     items[i].classList.remove('select');
    }
    targetEl.classList.add ('select');
    for (var i = 0; i < texts.length; i++) {
     texts[i].style.display = 'none';
    } 
    var id = targetEl.getAttribute('data-id');
    root.querySelector ('div[id=' + id + ']').style.display = 'block';
     //пользуемся идентификаторами элементов tabs-1, tabs-2 и т.д.
   }
  };
 </script>

</body></html>

02.11.2019, 17:54 [1541 просмотр]


теги: javascript html css вебдезигн

К этой статье пока нет комментариев, Ваш будет первым