js 实现选项卡切换功能

最新推荐文章于 2022-08-27 16:01:12 发布

pengzihui

最新推荐文章于 2022-08-27 16:01:12 发布

阅读量241

点赞数

文章标签： css js html javascript

本文链接：https://blog.csdn.net/pengzihui/article/details/104884097

版权

本文详细介绍了如何使用JavaScript配合HTML和CSS实现一个基本的选项卡切换功能，包括动态切换内容显示、添加样式变化等关键步骤，适合前端开发者学习实践。

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

<style>
        .box{width: 500px;height: 400px;border: solid 1px black;margin: 20px auto;}
        .box ul{margin: 0;padding: 0;list-style: none;height: 40px;line-height
        :40px;display: flex;background: #ccc;text-align: center;}
        .box li{flex:1;border-left: solid 1px black;border-right: solid 1px black;}
        .box li.active{background: red;}
        .cont div{width: 500px;height: 360px;display: none;}
        .cont .cont1{background: #f0f;display: block;}
        .cont .cont2{background: #f00;}
        .cont .cont3{background: #00f;}
    </style>

<body>
    <div class="box">
        <ul><li class="active">新闻</li><li>招聘</li><li>广告</li></ul>
        <div class="cont">
            <div class="cont1">第一个选项卡的内容区域</div>
            <div class="cont2">第二个选项卡的内容区域</div>

最低0.47元/天解锁文章

pengzihui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 实现选项卡切换功能

<style> .box{width: 500px;height: 400px;border: solid 1px black;margin: 20px auto;} .box ul{margin: 0;padding: 0;list-style: none;height: 40px;line-height :40px;display: ...
复制链接

扫一扫