tab switch 1

by John Doe

HTML

<ul attr-tabWrapClass="yes" class="tab_switch_wrap">
  <!-- <span> -->
    <li class="tab-switch" attr-tabClass="tab-first">first</li>
    <li class="tab-switch" attr-tabClass="tab-second">second</li>
    <li class="tab-switch" attr-tabClass="tab-third">third</li>
    <li class="tab-switch" attr-tabClass="tab-fourth3">nincs</li>
  <!-- </span> -->
</ul>
<ul attr-tabWrapClass="yes" class="tab_switch_wrap hidden">
    <li class="tab-switch" attr-tabClass="tab-first">first</li>
    <li class="tab-switch" attr-tabClass="tab-second">second</li>
    <li class="tab-switch" attr-tabClass="tab-third">third</li>
    <li class="tab-switch" attr-tabClass="tab-fourth3">nincs</li>
</ul> 
<div class="tab-wrap yes">
    <div class="tab tab-first">1. first</div>
    <div class="tab tab-second">1. second</div>
    <div class="tab tab-third">1. third</div>
    <div class="tab tab-fourth">1. nincs</div>
</div>
<div class="tab-wrap">
  <div class="tab tab-first">2. first </div>
  <div class="tab tab-second">2. second </div>
  <div class="tab tab-third">2. third </div>
  <div class="tab tab-fourth">2. nincs </div>
</div>


<div class="hidden">
  <ul attr-tabWrapClass="no" class="tab_switch_wrap">
    <!-- <span> -->
      <li class="tab-switch" attr-tabClass="tab-first">first</li>
      <li class="tab-switch" attr-tabClass="tab-second">second</li>
      <li class="tab-switch" attr-tabClass="tab-third">third</li>
      <li class="tab-switch" attr-tabClass="tab-fourth">nincs</li>
    <!-- </span> -->
  </ul>
  <div class="tab-wrap no">
    <div class="tab tab-first">1. first</div>
    <div class="tab tab-second">1. second</div>
    <div class="tab tab-third">1. third</div>
    <div class="tab tab-fourth">1. nincs</div>
  </div>
  <div class="tab-wrap">
    <div class="tab tab-first">2. first </div>
    <div class="tab tab-second">2. second </div>
    <div class="tab tab-third">2. third </div>
    <div class="tab tab-fourth">2. nincs </div>
  </div>
</div>

CSS

/* main */
.tab-wrap .tab {
  display: none;
}

.tab-wrap .tab:first-child {
  display: block;
}

.tab-switch {
  cursor: pointer;
}

/* style */
body{
  font-family: arial;
  font-size: 14px;
}
.tab_switch_wrap{
  margin: 0;
  padding: 0;
  display: inline-block;
  width: 100%;
  margin-bottom: 15px;
}
.tab_switch_wrap li{
  cursor: pointer;
  float: left;
  list-style-type: none;
  margin-right: 15px;
  padding: 10px 30px;
  border-radius: 5px;
  background-color: #64b448;
  color: #fff;
  box-shadow: 1px 1px 5px #e6e6e6;
  text-shadow: 1px 1px #a2a2a2;
}
.tab_switch_wrap li:last-of-type{
  margin-right: 0;
}
.tab-wrap{
  padding: 15px;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  height: 100px;
  line-height: 100px;
  background-color: #64b448;
  color: #fff;
}
.tab-wrap:not(.yes):not(.no){
  background-color: #aabfa3;
  position: relative;
}
.tab-wrap:not(.yes):not(.no):after{
  display: inline-block;
  position: absolute;
  padding: 10px 15px;
  content: "inactive";
  background-color: rgba(0, 0, 0, 0.2);
  line-height: 1.2;
  font-size: 12px;
  bottom: 0;
  right: 0;
}
.hidden{
  display: none;
 }
.hiden{
  margin-top: 15px;
}

JavaScript

$('.tab-switch').click(function(){
	var wrap = '.'+ $(this).closest('.tab_switch_wrap').attr('attr-tabWrapClass'),
  		elem = $(wrap + ' .' + $(this).attr('attr-tabClass'));
   if( $(elem).length){
			$(wrap +  ' .tab').hide();
			$(elem).show();
    } 
});


/*

$('.tab-switch').click(function(){
	var y = $(this).closest('.tab_switch_wrap').attr('attr-tabWrapClass'),
  		x = $(this).attr('attr-tabId'),
      z = $('.' + y + ' .' + x);
  if( $('.tab-wrap .' + x).length){
  	$('.' + y +  ' .tab').hide();
		$(z).show();
  }
});

*/





/*$('.tab-switch').click(function(){
	var x = $(this).attr('attr-tabId');
  if( $('.tab-wrap .' + x).length){
  	$('.tab-wrap .tab').hide();
		$('.tab-wrap .' + x).show();
  }
});*/