JSFiddle - React, Tailwind, and code Playground
HTML
<span class='tab'>Tab1</span><span class='tab 1'>Tab2</span><span class='tab'>Tab3</span>
<div class="content">
<div class="c">aaaa a aaaaa aaaaaa a a a a aaaaaa aaaaaa aaaaa</div>
<div class="c none 1">bbbb bbbb bbbbb bbbb bbbb bbbbb bbbb bbbbb bbbb bbbbb</div>
<div class="c none">ccc ccccc cccccc ccccc cccccc ccccc ccccc</div>
</div>
CSS
/*
При клики на таб, найти такой же класс у контента
и отобразить его, а остальные скрыть
*/
span{
display: inline-block;
margin-right: 10px;
}
.content{
width: 130px;
}
.none{
display: none;
}
JavaScript
var tabs = document.querySelectorAll('.tab')
var con = document.querySelectorAll('.c')
for(var i = 0; i < tabs.length; i++){
function foo(){
for(var v = 0; v < con.length; v++){
tabs[i].addEventListener('click', function(e){
if(e.target.classList.contains('1')){
con[v].classList.remove('none')
}
})
}
}
foo()
}