tabsTrouble

by ziqq

HTML

<!-- begin tabs -->
		<div class="tab__wrap">
			<div class="tab__titles">
				<div class="tab__title is-active" data-tab="0">tab 1</div>
				<div class="tab__title" data-tab="1">tab 2</div>
				<div class="tab__title" data-tab="2">tab 3</div>
			</div>
			<div class="tab__contentes">
				<div class="tab__content" style="display: block;">content 1content 1content 1content 1content 1content 1content 1content 1content 1content 1</div>
				<div class="tab__content">content 2content 2content 2content 2content 2content 2content 2content 2content 2content 2</div>
				<div class="tab__content">content 3content 3content 3content 3content 3content 3content 3content 3content 3content 3</div>
			</div>
		</div>
		<!-- end tabs -->

CSS

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;vertical-align:baseline}fieldset,img{margin:0;padding:0;vertical-align:baseline}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;box-sizing:border-box}a img,fieldset,img{border:none}input[type=email],input[type=tel],input[type=text],textarea{-webkit-appearance:none}button,input[type=submit]{cursor:pointer}button::-moz-focus-inner,input[type=submit]::-moz-focus-inner{padding:0;border:0}textarea{overflow:auto}button,input{margin:0;padding:0;border:0}a,a:focus,button,div,h1,h2,h3,h4,h5,h6,input,select,span,textarea{outline:none}ol,ul{list-style-type:none}table{border-spacing:0;border-collapse:collapse;width:100%}*,:after,:before{box-sizing:inherit}.icon-facebook{width:.53em;height:1em;fill:#000}*,.menu{padding:0}*{outline:none;margin:0}body{font-size:16px;font-family:Helvetica,sans-serif}.wrapper{max-width:960px;margin:50px auto 0}.menu{margin:50px 0;list-style-type:none}.menu__item{display:inline-block;margin-right:25px;position:relative;cursor:pointer}.menu__sub{min-width:150px;position:absolute;top:100%;left:0;background-color:#eee;cursor:pointer}.tab__contentes:after,.tab__titles:after{content:" ";display:table;clear:both}.tab__title{float:left;padding:5px 30px;border-bottom:1px solid rgba(0,0,0,.3);transition:border .35s linear;cursor:pointer}.tab__title:hover{border-bottom:1px solid rgba(0,0,0,.6)}.tab__title.is-active{border-bottom:1px solid #000}.tab__content{display:none;padding:15px 30px}@media (prefers-reduced-motion:reduce){*{transition:none!important}}

JavaScript

//Tab Start
  document.querySelector('.tab__titles').addEventListener('click', tabs);
  
  function tabs(e) {
  	var target = e.target;
  	if (target.className == 'tab__title') {
  		var dataTab = target.getAttribute('data-tab');
  		var tabContent = document.querySelectorAll('.tab__content');
  		var tabTitle = document.querySelectorAll('.tab__title');
  		for (var i = 0; i < tabTitle.length; i++) {
  			tabTitle[i].classList.remove('is-active');
  		}
  		target.classList.add('is-active');
  		for (var i = 0; i < tabContent.length; i++) {
  			if (dataTab == i) {
  				console.log('BLOCK');
  				// tabContent[i].style.display = 'block';
  			}else{
  				// tabContent[i].style.display = 'none';
  				console.log('NONE');
  			}
  		}
  	}  	
  }
  //Tab End