Javascript

Табы на чистом javascript

Табы на чистом javascript

Стенограмма видео

Верстка:

<ul class="tabs-links">
   <li>
       <span>Первый таб</span>
    </li>
    <li>
       <span>Второй таб</span>
    </li>
    <li>
       <span>Третий таб</span>
    </li>
</ul>
<ul class="tabs-content">
    <li>
       <span>Содержимое первого таба</span>
    </li>
    <li>
       <span>Содержимое второго таба</span>
    </li>
    <li>
       <span>Содержимое третьего таба</span>
    </li>
</ul>

Стили:

.tabs-links li {list-style: none; display: inline-block; padding: 5px 10px; border: 1px solid #333; cursor: pointer}
.tabs-content {position: relative}
.tabs-content li {opacity: 0; position: absolute; transition: all 0.5s ease-in;}
.tabs-content li:first-child {opacity: 1;}

Скрипт js:

var links = document.querySelectorAll('.tabs-links li');
var content = document.querySelectorAll('.tabs-content li');
for(var i=0; i <links.length; i++) {
    (function(i) {
       var link = links[i];
       link.onclick = function() {
           for(var j=0; j <content.length; j++) {
              var opacity = window.getComputedStyle(content[j]).opacity;
              if(opacity == "1") {
                 content[j].style.opacity = "0";
              }
           }
        content[i].style.opacity = "1";
        }
    })(i);
}


Возврат к списку

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

Социальные сети

Карусель работ

Рандом новостей