The code is fairly concise and easy to understand, without much nonsense.
Directly to the code:
Copy Code code as follows:
<! DOCTYPE html>
<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>
<body>
<div class= "Tabs" id= "tabs" >
<a href= "javascript:;" class= "on" > Home </a>
<a href= "javascript:;" > Technology </a>
<a href= "javascript:;" > Life </a>
<a href= "javascript:;" > Works </a>
<div style= "Clear:both;" ></div>
<p class= "Tabs-content" > Home </p>
<p class= "Tabs-content_hide" > Technology </p>
<p class= "Tabs-content_hide" > Life </p>
<p class= "Tabs-content_hide" > Works </p>
</div>
</body>
<footer></footer>
------Demo.js---------------
Copy Code code 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 not very simple to achieve the switch effect of the tab, the small partners themselves landscaping can be used to their own projects to go.