Табы на чистом 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);
}