选项卡案例

最新推荐文章于 2023-06-20 11:16:50 发布

黄酱！

最新推荐文章于 2023-06-20 11:16:50 发布

阅读量410

点赞数

分类专栏： JS 文章标签： javascript css css3

本文链接：https://blog.csdn.net/tianranran/article/details/121752686

版权

本文详细介绍了如何利用JavaScript和CSS3创建交互式的选项卡组件。通过JavaScript实现选项卡的动态切换，利用CSS3添加过渡效果，提升用户体验。内容包括HTML布局、CSS样式设置以及JavaScript事件处理。

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

第一种方法
.container {
   
            width: 600px;
            height: 50px;
            display: flex;
            justify-content: center;
            margin: 100px auto;
        }

        button {
   
            width: 200px;
            background-color: #2931a7;
            border-right: 1px solid white;
            color: white;
        }
        /*  1. 定义一个选中效果class样式active */
        .active {
   
            background-color: red;
        }
    </style>
    <!-- 
        选项卡效果思路:
           1. 定义一个选中效果class样式active
           2. 清除原来的选中效果
                清除所有元素的
           3. 给选中Tab元素设置active选中效果
               给选中Tab元素?
                    
     -->
</head>

<body>
    <div class="container">
        <button class="active" onclick="onTab(0)">选项1</button>
        <button onclick="onTab(1)">选项2</button>
        <button onclick="onTab(2)">选项3</button>
    </div>

    <script>
        function onTab(index) {
   
            //获取元素
            var btnEles = document.querySelectorAll('button')
            //2. 清除所有元素的active
            for(var i = 0; i < btnEles.length; i++){
   
                btnEles[i].className = ''
            }

            //3. 设置class为active, 操作样式
            //操作样式
            btnEles[index].className = 'active'
        }

第二种方法
.active {
   
            background-color: red;
        }
    </style>
    <!-- 
        选项卡效果思路:
           1. 定义一个选中效果class样式active
           2. 清除原来的选中效果
                清除所有元素的
           3. 给选中Tab元素设置active选中效果
               给选中Tab元素?
                    
     -->
</head>

<body>
    <div