首页 > itarticle > 选项卡切换

选项卡切换

admin 10月 01, 2020 0

①进行HTML布局

②CSS样式设置

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

③用JavaScript实现选项卡转换

获取选项卡标题
获取选项卡内容
采取遍历操作，得知哪个选项卡内容和哪个选项卡标题相对应
改变选项卡内容的CSS类名称，达到当前点击的选项卡显示，其他选项卡隐藏

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";
          }
      }
    }