Now the page has many kinds of page effects, commonly used with pop-up layer effect, seamless scrolling effect, tab switching effect. Today to share a native JavaScript to write the tab switch effect, because I have a limited level, if you have problems please point out.
The effect chart is as follows:
HTML code：
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>js-tabs</title>
<link rel= "stylesheet" type= "Text/css" href= "Css/base.css" media= "All"/>
<style type= "Text/css" >
A{color: #a0b3d6;}
. tabs{border:1px solid #a0b3d6; margin:100px;width:300px;}
. Tabs-nav a{background: #eaf0fd; line-height:30px;padding:0 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{padding:20px;border-top:1px solid #a0b3d6; margin-top:-1px;}
</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>
<p class= "Tabs-content" > Home Home Home home page home first home </p>
<p class= "Tabs-content Hide" > Technical Technical Technical Technical technology </p>
<p class= "Tabs-content Hide" > Life, Life, life, life and life </p>
<p class= "Tabs-content Hide" works of work works of works of work works </p>
</div>
<br/><br/>
<div class= "tabs" id= "TABS2" >
<a href= "javascript:;" class= "on" >11111</a>
<a href= "javascript:;" >22222</a>
<a href= "javascript:;" >33333</a>
<p class= "Tabs-content" >11111111111111111111111111111111111</p>
<p class= "Tabs-content Hide" >222222222222222222222222222222222222</p>
<p class= "Tabs-content Hide" >333333333333333333333333333333333333333</p>
</div>
</body>
<script type= "Text/javascript" src= "Tabs.js" ></script>
<script type= "Text/javascript" >
Window.onload = function () {
Tabs (' Tabs ', ' click ');
Tabs (' TABS2 ', ' mouseover ');
}
</script>
Which base.css reference to my CSS frame--base.css.
JavaScript code：
Copy Code code as follows:
function tabs (id,trigger) {
var tabsbtn = document.getElementById (ID). getElementsByTagName (' H2 ') [0].getelementsbytagname (' a ');
var tabscontent = document.getElementById (ID). getElementsByTagName (' P ');
for (var i = 0,len = Tabsbtn.length i < len; i++) {
Tabsbtn[i].index = i;
if (trigger = = ' click ') {
Tabsbtn[i].onclick = function () {
Clearclass ();
This.classname = ' on ';
Showcontent (This.index);
}
}else if (trigger = = ' MouseOver ') {
Tabsbtn[i].onmouseover = function () {
Clearclass ();
This.classname = ' on ';
Showcontent (This.index);
}
}
}
function Showcontent (n) {
for (var i = 0,len = Tabsbtn.length i < len; i++) {
Tabscontent[i].classname = ' hide ';
}
Tabscontent[n].classname = ' tabs-content ';
}
function Clearclass () {
for (var i = 0,len = Tabsbtn.length i < len; i++) {
Tabsbtn[i].classname = ';
}
}
}
Attention：
1, the title such as Home page, technology, life and works are in the H2 label.
2, display the current title using class named on, if modified to other class such as selected, you need to modify the corresponding content in the tabs.js.
3, the title of the corresponding content is in the P tag. P tags can no longer be P-tagged.
PS: This is my idle boring, through their own learning JavaScript knowledge, random write some effects.
