手风琴效果

最新推荐文章于 2025-06-23 16:14:56 发布

kakaxiD

最新推荐文章于 2025-06-23 16:14:56 发布

阅读量472

点赞数

CC 4.0 BY-SA版权

分类专栏：个人日记

本文链接：https://blog.youkuaiyun.com/kakaxiD/article/details/51374286

个人日记专栏收录该内容

108 篇文章

订阅专栏

效果图
这里写图片描述

代码：

 <ul class="tab" id="tab">
                <li class="tab1 active">
                    <div class="slide-bar">
                        <b></b><div>按照此登入账户中心，如阁下还没开通真实账户，可按照此申请。</div><span></span>
                    </div>
                    <div class="content-box">
                    1
                    <!--此处放内容-->
                    </div>
                </li>
                <li class="tab2">
                    <div class="slide-bar">
                        <b></b><div>点击"存款"选择支付渠道及输入金额</div><span></span>
                    </div>
                    <div class="content-box">
                        2
                        <!--此处放内容-->
                    </div>
                </li>
                <li class="tab3">
                    <div class="slide-bar">
                        <b></b><div>点击提交核对金额后点击"支付"</div><span></span>
                    </div>
                    <div class="content-box">
                        3
                        <!--此处放内容-->
                    </div>
                </li>
                <li class="tab4">
                    <div class="slide-bar">
                        <b></b><div>页面会自动跳转至支付平台请按指示登入网上银行进行存款</div><span></span>
                    </div>
                    <div class="content-box">
                        4
                        <!--此处放内容-->
                    </div>
                </li>
                <li class="tab5">
                    <div class="slide-bar">
                        <b></b><div>存款成功后，系统会实时把金额加到您的账户中</div><span></span>
                    </div>
                    <div class="content-box">
                        5
                        <!--此处放内容-->
                    </div>
                </li>
            </ul>

CSS

.tab li .content-box{display: none;}
.tab li.active .content-box{display: block;}

JAVASCRIPT

$("#tab li").click(function(){
       $(this).toggleClass('active').siblings('li').removeClass('active')
    });