Javascript implements tab switching effect-JS Tutorial-php.cn

Javascript implements tab switching effect

高洛峰

Release： 2017-03-24 13:43:07

Original

1578 people have browsed it

There are many various page effects on the current page. Commonly used ones include pop-up layer effect, seamless scrolling effect, and tab switching effect. Today I will share a tab switching effect written by myself using native javascript. Due to my limited skills, please point out any problems.
The rendering is as follows:

Javascript implements tab switching effect

html code:

js-tabs

首页 技术 生活 作品

首页首页首页首页首页首页首页首页首页首页

11111 22222 33333

11111111111111111111111111111111111

Copy after login

javascript code:

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 = ''; 
} 
} 
}

Copy after login

Note:
1. Title For example, homepage, technology, life and works are in h2 tags.
2. Use the class named on to display the current title. If you change it to another class such as selected, you need to modify the corresponding content in tabs.js.
3. The content corresponding to the title is in the p tag. There can be no more p tags within p tags.
PS: These are some results I wrote casually based on the javascript knowledge I learned when I was bored.

For more articles related to javascript implementing tabs switching effect, please pay attention to the PHP Chinese website!

WeChat Mini Program: How to implement tabs tab effect example

WeChat Mini Program tabs effect implementation

Simple and stylish pure CSS3 Tabs option card effects