Javascript implements tabs switching effect (self-written native js)_javascript skills

There are many various page effects on today's pages. Commonly used ones include pop-up layer effects, seamless scrolling effects, and tab switching effects. 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:

html code:

Copy code The code is as follows:

Homepage
< ;a href="javascript:;">Technology
Life
Works

HomepageHomepageHomepageHomepageHomepageHomepageHomepage

technology technology technology technology technology technology technology technology technology

life life life life life life life life life

worksworksworksworkworksworks

11111
22222
33333

1111111111111111111111111111111111

-content hide">222222222222222222222222222222222222

3333333333333333333333333333333333333< ;

where base.css refers to
my CSS framework - base.css.
javascript code:

Copy code The code is 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 = '';
}
}
}


Note:
1. Titles such as 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 effects I wrote casually based on the javascript knowledge I learned when I was bored.