使用javascript创建选项卡切换内容块

最新推荐文章于 2021-07-06 22:11:33 发布

sinat_42994131

最新推荐文章于 2021-07-06 22:11:33 发布

阅读量351

点赞数 1

分类专栏： javaScript

本文链接：https://blog.csdn.net/sinat_42994131/article/details/99057936

版权

本文介绍了如何使用JavaScript创建选项卡切换内容块的实例。默认显示第一个选项卡内容，鼠标移到其他选项卡上时，相应内容会显示。包括CSS、HTML和JavaScript代码的详细讲解。

摘要由CSDN通过智能技术生成

通过几天的学习，准备做一些实例来练练手
这个功能主要是实现，默认显示第一个选项卡的内容，当鼠标移到其他选项卡上时，显示该选项卡所对应的内容
CSS代码

body,ul,li{      /*并集选择器*/
    margin:0;    /*设置外边距的宽度为0*/
    padding:0;   /*设置内边距宽度*/
    font:12px/18px arial;  /*字号的大小为12px，行间距为18px*/
}
ul{              /*交集选择器*/
    list-style: none; /*不显示列表的前导符*/
}
.box{            /*类选择器*/
    width:400px; /*content的宽度为400px*/
    margin:0;   /*设置外边距宽度为0*/
}
.hide{           /*类选择器*/
    display:none; /*隐藏内容模块*/
}
#tab{             /*ID选择器*/
    height: 25px;
    border-bottom: 1px solid #ccc;  /*设置下边框的宽度（1px)，样式（实线)和颜色（#ccc)*/
}
#tab li{
    float:left;/*浮动排版*/
    width:80px;
    height:24px;
    line-height: 24px;  /*使选项卡上的文本居中*/
    margin: 0;
    text-align: center; /*设置文本的对其方式*/
    border:1px solid #ccc;
    border-bottom: none;
    background: coral;
    cursor:pointer;  /*使鼠标移到选项卡上时变成手指形状*/
}

#tab.act{
    height: 25px;
    background: aqua;
}
#content{
    border:1p