简单易用的选项卡代码

最新推荐文章于 2021-06-21 10:53:45 发布

牛逼哄哄的树叶

最新推荐文章于 2021-06-21 10:53:45 发布

阅读量573

点赞数 1

文章标签： html css javascript jquery

本文链接：https://blog.csdn.net/qq_35935086/article/details/52277553

版权

这个示例展示了如何利用HTML、CSS和jQuery创建一个简单的选项卡切换效果。通过点击不同按钮，可以显示对应的选项卡内容，初始显示第一个选项卡，其他选项卡默认隐藏。点击按钮会改变其背景色，并相应地显示或隐藏内容区域。

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #btn1,#btn2,#btn3{
            width: 160px;
            height: 40px;
            border: none;
            border-radius: 15px;
        }
        #btn1{
            background: green;
        }
        #btn1:visited{
            border: none;
        }
        #btn2,#btn3{
            background: yellow;
        }
        #tab_1,#tab_2,#tab_3{
            margin-top: 10