js实现选项卡切换

最新推荐文章于 2025-06-11 11:33:14 发布

糖莱

最新推荐文章于 2025-06-11 11:33:14 发布

阅读量2.1k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/weixin_44541213/article/details/118056240

本文介绍了如何使用JavaScript实现选项卡切换功能，适用于处理多个选项的情况。通过点击不同选项卡，可以展示相应的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击选项卡，显示不同的内容
（适用于比较多选项的选项卡）
在这里插入图片描述

下面是源代码

<div class="zsl-favourable-content">
                <div class="zsl-favourable-child-tab tab-box">
                    <ul class="nav-tabs">
                        <li class=" nav-tab" data-index="0"><a id="undefined" citycode="CAN" otype="button" otitle="首页-专享优惠-国内优惠机票-广州">广州</a></li>
                        <li class="current  nav-tab" data-index="1"><a id="undefined" citycode="NKG" otype="button" otitle="首页-专享优惠-国内优惠机票-南京">南京</a></li>                   
                        <li class="more"><a  otype="button" otitle="首页-国内优惠机票-更多">更多<i></i></a></li>
                    </ul>
                </div>
                <div class="zsl-favourable-child-pane tab-pane">
                    <div class="zsl-favourable-child-content tab-pane  hide" city="undefined">
                        <ul class="nav-tabs">
                            <li data-flight="广州,CAN,汕头,SWA,S,2021-04-06,null">
                                <div class="zls-child-city">
                                    <div class="city rL">广州</div>
                                </div>

最低0.47元/天解锁文章

新学期VIP享超值加赠