使用Javascript实现简单的制表符开关
直接附上代码:
复制代码代码如下所示:
JS简单的标签
* {字体大小:14px;保证金:0px;}
一个{颜色:# a0b3d6;文字装饰:无;}
{ border: 1px solid。标签# a0b3d6;保证金:100px;宽度:350px;}
资产净值。标签{背景:# eaf0fd;线高度:30px;填充:0px 20px,0px 20px;显示:内联块;边框右:1px solid # a0b3d6;固体;
。标签导航,{背景:白色;底部边框:1px solid白色;位置:相对;}
。标签内容{显示:块;padding: 20px;边境上:1px solid # a0b3d6;边距:- 1px;}
。tabs-content_hide {显示:无;}
首页
技术
生活
作品
首页
技术
生活
作品
------demo.js--------------—
复制代码代码如下所示:
窗口。指针函数(){
制表符()
}
函数选项卡(id,触发器){
无功tabbtn = document.getelementbyid(ID)。GetElementsByTagName(H){ 0 }。getElementsByTagName();
无功tabscontent = document.getelementbyid(ID)。GetElementsByTagName(P);
对于(var i = 0;i < tabbtn.length;i++){
我tabbtn { }。指数=我;
如果(触发= = 'mouseover){
我tabbtn { }。onmouseover =函数(){
ClearClass();
这一方法= ;
showcontent(这个指数);
}
}
功能showcontent(N){
对于(var i = 0;i < tabscontent.length;i++){
我tabscontent { }。指数=我;
我tabscontent { }。类名=tabs-content_hide ;
}
tabscontent {N}。类名=标签内容;
}
功能clearclass(){
对于(var i = 0;i < tabbtn.length;i++){
tabbtn {我} classname = ;
}
}
}
}
这是容易实现的标签切换效果,可以美化自己的合作伙伴使用他们自己的项目。