前端 选项卡切换

gd1998 · June 12, 2020 · 4 hits

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";
}
}
}
No Reply at the moment.
You need to Sign in before reply, if you don't have an account, please Sign up first.