选项卡切换


8种机械键盘轴体对比
本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选?

image
image
image

①进行HTML布局
②CSS样式设置

.show{
display:block;
}
.hide{
display:none;
}

③用JavaScript实现选项卡转换

  • 获取选项卡标题
  • 获取选项卡内容
  • 采取遍历操作,得知哪个选项卡内容和哪个选项卡标题相对应
  • 改变选项卡内容的CSS类名称,达到当前点击的选项卡显示,其他选项卡隐藏
1
2
3
4
5
6
7
8
9
10
11
12
13
14
for(var i=0; i<xli.length;i++){
xli[i].index=i;
xli[i].onmouseover=function(){
for(var i=0;i<xli.length;i++){
xli[i].className="";
}
this.className="active";
for(var j=0;j<xxdiv.length;j++){
xxdiv[j].className="hide";
}
xxdiv[this.index].className="show";
}
}
}