使用javascript实现简单的选项卡切换_javascript技巧
程序员文章站
2022-05-31 20:04:54
...
代码相当简洁、简单易懂,就不多废话了。
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[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[i].index = i;
tabsContent[i].className = "tabs-content_hide";
}
tabsContent[n].className="tabs-content";
}
function clearClass(){
for(var i=0;i
tabBtn[i].className="";
}
}
}
}
直接奉上代码:
复制代码 代码如下:
------demo.js---------------
复制代码 代码如下:
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
if(trigger=='mouseover'){
tabBtn[i].onmouseover=function(){
clearClass();
this.className="on";
showContent(this.index);
}
}
function showContent(n){
for (var i=0; i
tabsContent[i].className = "tabs-content_hide";
}
tabsContent[n].className="tabs-content";
}
function clearClass(){
for(var i=0;i
}
}
}
}
是不是很简单就实现了选项卡的切换效果呢,小伙伴们自己美化下就可以用到自己项目中去了。
上一篇: Node.js安装与NPM使用介绍
下一篇: npm学习