js选项卡制作

最新推荐文章于 2022-11-13 20:35:01 发布

少年是只猫

最新推荐文章于 2022-11-13 20:35:01 发布

阅读量820

点赞数

本文链接：https://blog.csdn.net/qq_41128253/article/details/98053714

版权

本文介绍了如何使用原生JavaScript创建选项卡。首先展示了HTML结构和CSS样式，使用flex布局和display属性控制内容的显示与隐藏。接着是JavaScript部分，通过循环实现点击时切换选项卡内容，讲解了let和var在循环中的不同效果。最后讨论了如何通过数据来动态渲染选项卡，提高了代码的可维护性。

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

选项卡

选项卡在很多项目中都有用到，下面是我用原生js做的选项卡，如有不足，望指正。

html结构与样式

头部导航采用flex布局，等宽分布li元素。设置颜色是为了区分界限。
内容部分宽高占满剩余的空间，每个内容块宽高100%。
通过display属性让选中项内容显示，其他项内容隐藏。
css中的on样式：选中的那一项，增加的样式（头部li元素）。
css中的show样式：选中的那一项的内容，增加的样式（内容的div元素，show用来显示此元素）。
思路：在鼠标点击（或经过）时，通过for循环，清空所有li元素和内容div元素的样式（on和show），在for后面给当前选中项的头部li元素加on样式，给内容div元素增加show样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>
        *{
            margin: 0;
            padding:0;
            list-style:none;
        }
        .box{
            width: 400px;
            height: 250px;
            border: 1px solid #000;
            box-shadow: 0 0 10px 4px #ccc;
            margin: 200px auto;
        }
        .title_list{
            width: 100%;
            display: flex;
        }
        .title_list li{
            flex-grow: 1;
            text-align: center;
            height: 40px;
            line-height: 40px;
            background: #8bdaf3;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .title_list li:nth-of-type