SOURCE

function selectTab(aa,isDiabled) {
	if(isDiabled) {
	  return;
	}
	document.getElementsByClassName("tabss")[0].getElementsByClassName("active")[0].setAttribute("class","noactive");
	document.getElementsByClassName("tabss")[0].getElementsByClassName("noactive")[aa].setAttribute("class","active");
	var contents = document.getElementsByClassName("tabka")[0].getElementsByClassName("tab-content");
	for(var index = 0;index < contents.length;index++) {
		contents[index].style.display = "none";
	}
	contents[aa].style.display = "block";
}
function selectTab2(aa,isDiabled) {
	if(isDiabled) {
	  return;
	}
	document.getElementsByClassName("tabss")[1].getElementsByClassName("active")[0].setAttribute("class","noactive");
	document.getElementsByClassName("tabss")[1].getElementsByClassName("noactive")[aa].setAttribute("class","active");
	var contents = document.getElementsByClassName("tabka2")[0].getElementsByClassName("tab-content");
	for(var index = 0;index < contents.length;index++) {
		contents[index].style.display = "none";
	}
	contents[aa].style.display = "block";
	
}
function selectTab3(aa,isDiabled) {
	if(isDiabled) {
	  return;
	}
	document.getElementsByClassName("second-tab")[0].getElementsByClassName("active")[0].setAttribute("class","noactive");
	document.getElementsByClassName("second-tab")[0].getElementsByClassName("noactive")[aa].setAttribute("class","active");
	var contents = document.getElementsByClassName("second-tab")[0].getElementsByClassName("tab-content");
	for(var index = 0;index < contents.length;index++) {
		contents[index].style.display = "none";
	}
	contents[aa].style.display = "block";
}

<h2>一级Tab</h2>
<p>Tab页一</p>
<div class="tabka first-tab">
  <ul class="tabss">
    <li class="noactive" onclick="selectTab(0,false)">html</li>
    <li class="active" onclick="selectTab(1,false)">css</li>
    <li class="noactive disabled" onclick="selectTab(2,true)">dom</li>
    <li class="noactive" onclick="selectTab(3,false)">javascript</li>
    <li></li>
  </ul>
  <div class="tab-content" style="display:none;">Html</div>
  <div class="tab-content" style="display:block;">Css</div>
  <div class="tab-content" style="display:none;">Dom</div>
  <div class="tab-content" style="display:none;">Javascript</div>
</div>
<p>Tab页二</p>
<div class="tabka first-tab tab-2">
  <ul class="tabss">
    <li class="noactive" onclick="selectTab2(0,false)">html</li>
    <li class="active" onclick="selectTab2(1,false)">css</li>
    <li class="noactive disabled" onclick="selectTab2(2,true)">dom</li>
    <li class="noactive" onclick="selectTab2(3,false)">javascript</li>
    <li></li>
  </ul>
  <div class="tab-content" style="display:none;">Html</div>
  <div class="tab-content" style="display:block;">Css</div>
  <div class="tab-content" style="display:none;">Dom</div>
  <div class="tab-content" style="display:none;">Javascript</div>
</div>
<h2>二级Tab</h2>
<div class="tabka second-tab">
  <ul class="tabss">
    <li class="noactive" onclick="selectTab3(0,false)">html</li>
    <li class="active" onclick="selectTab3(1,false)">css</li>
    <li class="noactive disabled" onclick="selectTab3(2,true)">dom</li>
    <li class="noactive" onclick="selectTab3(3,false)">javascript</li>
    <li class="noactive" onclick="selectTab3(4,false)">jquery</li>
  </ul>
  <div class="tab-content" style="display:none;">Html</div>
  <div class="tab-content" style="display:block;">Css</div>
  <div class="tab-content" style="display:none;">Dom</div>
  <div class="tab-content" style="display:none;">Javascript</div>
  <div class="tab-content" style="display:none;">jquery</div>
</div>

.tabka {
	display: -webkit-flex;
  display: flex;
	flex-direction: column;
}
.tabka ul.tabss {
  display: block;
  padding: 0;
  margin: 20px 0;
}
.first-tab ul.tabss li {
  display: inline-block;
	float: left;
	height:30px;
	line-height:30px;
	padding: 8px 30px;
	text-align:center;
	box-sizing: content-box;
	border-bottom: 1px solid #ddd;
}
.tabka ul.tabss li:(.disabled):hover {
	cursor:not-allowed;
}
.tabka ul.tabss li.active {
	border-bottom:none;
	border-left:1px solid #ddd;
	border-right:1px solid #ddd;
	border-top:2px solid #3366ff;
	padding: 7px 30px;
}
.tabka ul.tabss li.noactive:not(:last-child):not(.disabled):hover {
		cursor:pointer;
		background:#e5ffff;
} 
.tabka .tabss li:last-child {
	width:100%;
	display:inline-block;
	position:absolute;
}
.tabka .tab-content{
	height:80px;
	width:100%;
	display:block;
}
.tab-2 ul.tabss li.active {
  border: none;
	border-bottom:3px solid #3366ff;
	padding:8px 30px;
}
.tab-2 ul.tabss li.noactive:not(:last-child):not(.disabled):hover {
		cursor:pointer;
		background:#e5ffff;
}

.second-tab ul.tabss li{
	display: inline-block;
	float: left;
	height:20px;
	line-height:20px;
	padding: 8px 30px;
	text-align:center;
	box-sizing: content-box;
	cursor:pointer;
}
.second-tab ul.tabss li:not(:last-child) {
	border: 1px solid #ddd;
	border-right:none;
}
.second-tab ul.tabss li:last-child {
	border: 1px solid #ddd;
	border-radius:0 4px 4px 0/0 4px 4px 0;
  width:auto;
}
.second-tab ul.tabss li:first-child {
	border-radius:4px 0 0 4px/4px 0 0 4px;
}
.second-tab ul.tabss li.active {
	background:#3366ff;
	border-color:#3366ff;
	color:#fff;
}
.second-tab ul.tabss li.noactive:not(.disabled):hover {
	background:#ccf5ff;
}
.tabka ul.tabss li.disabled:hover {
	cursor:not-allowed;
}