js原生代码选项卡切换

想回岸上的鱼

已于 2022-06-23 09:01:42 修改

阅读量451

点赞数

文章标签： javascript 前端 css

于 2022-06-21 20:31:23 首次发布

本文链接：https://blog.csdn.net/m0_71486353/article/details/125380409

版权

选项卡功能实现
利用class类的方式，实现点击上面单个不同选项，选项设置样式，并且下面对应的区域切换成相应的内容
切换tab
1. 给所有选项卡绑定点击事件
2. 清除所有选项选中效果
3. 给当前选项设置选中效果

//css代码
* {
   
    padding: 0;
    margin: 0;
}

ul,
li {
   
    list-style: none;
}

.container {
   
    width: 600px;
    margin: 100px auto;
}

.container ul {
   
    width: 100%;
    height: 50px;
    background-color: pink;
    display: flex;
}

.container ul li {
   
    width: 200px;
    height: 100%;
    text-align: center;
    line-height: 50px;
    border: 1px solid darkblue;
}

.container ul .active {
   
    background-color: skyblue;
}

.container ol {
   
    position: relative;
    width: 100%;