The code is quite concise and easy to understand, so there is no more nonsense.
Directly present the code:
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html" charset="utf-8">
<title>js Simple Tab</title>
<script type="text/javascript" src="js/demo.js"></script>
<style type="text/css">
*{ font-size: 14px;margin: 0px;}
a{color:#a0b3d6;text-decoration: none;}
.tabs{border:1px solid #a0b3d6;margin:100px;width:350px;}
.tabs-nav a{background:#eaf0fd; line-height:30px;padding:0px 20px 0px 20px;display:inline-block;border-right:1px solid #a0b3d6;border-bottom:1px solid #a0b3d6; float:left;}
.tabs-nav .on{background:white; border-bottom:1px solid white; position:relative;}
.tabs-content{display: block; padding:20px;border-top:1px solid #a0b3d6; margin-top:-1px;}
.tabs-content_hide{display: none;}
</style>
</head>
<body>
<div id="tabs">
<h2>
<a href="javascript:;">Home</a>
<a href="javascript:;">Technology</a>
<a href="javascript:;">Life</a>
<a href="javascript:;">Works</a>
</h2>
<div style="clear:both;"></div>
<p>Home</p>
<p>Technology</p>
<p>Life</p>
<p>Works</p>
</div>
</body>
<footer></footer>
</html>
--------------------------------------------------------------------------------------------------------------------------------
The code copy is as follows:
window.onload=function(){
tabs("tabs","mouseover");
}
function tabs(id, trigger){
var tabBtn = document.getElementById(id).getElementsByTagName("h2")[0].getElementsByTagName("a");
var tabsContent = document.getElementById(id).getElementsByTagName("p");
for(var i=0;i<tabBtn.length;i++){
tabBtn[i].index = i;
if(trigger=='mouseover'){
tabBtn[i].onmouseover=function(){
clearClass();
this.className="on";
showContent(this.index);
}
}
function showContent(n){
for (var i=0; i<tabsContent.length ;i++) {
tabsContent[i].index = i;
tabsContent[i].className = "tabs-content_hide";
}
tabsContent[n].className="tabs-content";
}
function clearClass(){
for(var i=0;i<tabBtn.length;i++){
tabBtn[i].className="";
}
}
}
}
Is it very simple to achieve the switching effect of the tab? Friends can use it in their own projects after beautifying it.