您现在的位置：首页 >> 前端 >> 内容

手风琴和选项卡效果

时间：2016/7/15 10:00:00 点击：

　　核心提示：!DOCTYPE htmlhtmlhead lang=enmeta charset=UTF-8title注资流程/titlelink rel=stylesheet href=css/common.cs...
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>注资流程</title>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/index.css"/>
    <!--<script src="js/jquery.min.js"></script>-->
    <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/jquery-powerSwitch.js"></script>
</head>
<body>
<p class="nav">
    <p class="nav1">
        <p><img src="images/home_02.png" alt=""/></p>
        <ul class="nav2">
            <li><a href="#">首页</a></li>
            <li><a href="">二元期货</a></li>
            <li><a href="">交易账户</a></li>
            <li><a href="">知识堂</a></li>
            <li><a href="">最新消息</a></li>
            <li><a href="">活动促销</a></li>
            <li><a href="">关于富达</a></li>
        </ul>
        <ul class="nav3">
            <li><a href=""> | </a></li>
            <li><a href="">登陆</a></li>
            <li><a href="">马上开户</a></li>
        </ul>
    </p>
</p>
<p class="banner"><img src="images/qw.png" alt=""/></p>
<p class="bodyer">
    <p class="content">
        <p class="cash">注资<span>流程</span></p>
        <p>富达金融提供24小时方便快捷的网上存取服务，如果您已经开通了网上银行存储服务，您可以随时登陆账号，于网上完成存款，金额即将添加到您的交易账户中。</p>
        <p>
            <ul class="tab" id="tab">
                <li class="tab1 ">
                    <p class="slide-bar active">
                        <b></b>

                        <p>按照此登入账户中心，如阁下还没开通真实账户，可按照此申请。</p>
                        <span></span>
                    </p>
                    <p class="content-box content1" >
                        <!--此处放内容-->
                        <p class="d_img"><img src="images/home_02.png" alt=""/></p>
                        <ul class="navbar">
                            <li><a href="">真实账户中心</a></li>
                            <li>|</li>
                            <li><a href="">登出</a></li>
                            <li>|</li>
                            <li><a href="">在线客服</a></li>
                            <li>|</li>
                            <li><a href="">联络我们</a></li>
                        </ul>
                        <p class="dcontent2">
                            <ul class="navbar2" id="navbar2">
                                <li class="actives1"><a href="javascript：void(0);">账户登入</a></li>
                                <li ><a href="javascript：void(0);">交易平台</a></li>
                                <li ><a href="javascript：void(0);">存款</a></li>
                                <li ><a href="javascript：void(0);">取款</a></li>
                                <li ><a href="javascript：void(0);">修改密码</a></li>
                                <li ><a href="javascript：void(0);">资金记录</a></li>
                            </ul>
                            <p class="dcontents" style="display: block;">
                                <p class="dcontentsf dcontents1" id="dcontents1" >
                                    <!--style='display: block;'-->
                                    <p class="dlogin"><a href="">账户登入</a></p>
                                    <p class="forget"><a href="">忘记密码</a></p>
                                    <p class="navtabs">
                                        <ul class="navbar3">
                                            <li><label>账户类别*</label> <span></span></li>
                                            <li><label>登陆账号*</label><input type="text"/></li>
                                            <li><label>密码*</label><input type="text"/></li>
                                            <li><label>验证码*</label><input type="text"/><span></span></li>
                                        </ul>
                                        <p class="dlogin1"><a href="">登陆</a></p>
                                        <p class="dreset"><a href="">重设</a></p>
                                    </p>
                                </p>
                                <p class="dcontentsf" id="dcontents2" style="display: none;">
                                    <!--此处填内容-->
                                    1111111111
                                </p>
                                <p class="dcontentsf" id="dcontents3" style="display: none;">
                                    <!--此处填内容-->
                                    2222222
                                </p>
                                <p class="dcontentsf" id="dcontents4" style="display: none;">
                                    <!--此处填内容-->
                                    333333333333
                                </p>
                                <p class="dcontentsf" id="dcontents5" style="display: none;">
                                    <!--此处填内容-->
                                </p>
                                <p class="dcontentsf" id="dcontents6" style="display: none;">
                                    <!--此处填内容-->
                                </p>
                            </p>
                        </p>
                    </p>
                </li>
                <li class="tab2" style="clear: both;">
                    <p class="slide-bar">
                        <b></b>

                        <p>点击"存款"选择支付渠道及输入金额</p>
                        <span></span>
                    </p>
                    <p class="content-box">
                        2
                        <!--此处放内容-->
                    </p>
                </li>
                <li class="tab3">
                    <p class="slide-bar">
                        <b></b>

                        <p>点击提交核对金额后点击"支付"</p>
                        <span></span>
                    </p>
                    <p class="content-box">
                        3
                        <!--此处放内容-->
                    </p>
                </li>
                <li class="tab4">
                    <p class="slide-bar">
                        <b></b>

                        <p>页面会自动跳转至支付平台请按指示登入网上银行进行存款</p>
                        <span></span>
                    </p>
                    <p class="content-box">
                        4
                        <!--此处放内容-->
                    </p>
                </li>
                <li class="tab5">
                    <p class="slide-bar">
                        <b></b>

                        <p>存款成功后，系统会实时把金额加到您的账户中</p>
                        <span></span>
                    </p>
                    <p class="content-box">
                        5
                        <!--此处放内容-->
                    </p>
                </li>
            </ul>
        </p>
        <p>
            <p>注意事项</p>

            <p>1.无论何种存款方式，本公司不会接受来自第三方的存款。如本公司收到非账户本人持有人之本人存款，将</br>会退款至发款方。发款方需要支付有关行政费用。</p>

            <p>2.本公司并未收取任何兑换费用</p>

            <p>3.任何问题都可以与<a href="">24小时客服</a>在线处理</p>
        </p>
        <p class="flow">取款<span>流程</span></p>
        <p class="dtext2">富达金融提供<span>简单快捷</span>的取款服务，您可以随时登入账户中心完成取款手续。</p>
        <ul class="tabs" id="tabs">
            <li class="tabs1">
                <p class="slide-bar">
                    <b></b>

                    <p>进入账户中心</p>
                    <span></span>
                </p>
                <p class="contents-box">
                    <p class="slide_p1">
                        <img src="images/home_02.png" alt=""/>
                        <ul>
                            <li><a href="">首页</a></li>
                            <li><a href="">二元期权</a></li>
                            <li><a href="">交易账户</a></li>
                            <li><a href="">最新消息</a></li>
                            <li><a href="">关于富达</a></li>
                        </ul>
                    </p>
                </p>
            </li>
            <li class="tabs2">
                <p class="slide-bar">
                    <b></b>

                    <p>输入账号和验证码登入</p>
                    <span></span>
                </p>
                <p class="contents-box">
                    3
                    <!--此处放内容-->
                </p>
            </li>
            <li class="tabs3">
                <p class="slide-bar">
                    <b></b>

                    <p>选择[取款]，输入取款金额并提交</p>
                    <span></span>
                </p>
                <p class="contents-box">
                    3
                    <!--此处放内容-->
                </p>
            </li>
        </ul>
    </p>
</p>
<script>

    $(function () {
//    $("#tab").on('click','li',function(){
//       $(this).toggleClass('active').siblings('li').removeClass('active')
//    });
        $("#tab>li .slide-bar").click(function () {//注册资本手风琴效果
            $(this).toggleClass('active').siblings('li').removeClass('active')

        });
        $("#tabs>li .slide-bar").click(function () {//取款流程手风琴效果
            $(this).toggleClass('actives').siblings('li').removeAttr('actives')
        });
        $("#navbar2>li").click(function () {// 选项卡切换
            var $this = $(this);
            var index = $this.index();

            $this.addClass('actives1').siblings("li").removeClass("actives1");
            $(".dcontents .dcontentsf").siblings().hide().eq(index).show();

    })
    });
</script>
</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script><script src="js/jquery-powerSwitch.js"></script>

手风琴和选项卡效果

手风琴和选项卡效果 注资流程

富达金融提供24小时方便快捷的网上存取服务，如果您已经开通了网上银行存储服务，您可以随时登陆账号，于网上完成存款，金额即将添加到您的交易账户中。

  • 按照此登入账户中心，如阁下还没开通真实账户，可按照此申请。

手风琴和选项卡效果 账户登入 忘记密码
登陆 重设 1111111111 2222222 333333333333

  • 点击"存款"选择支付渠道及输入金额

    2

  • 点击提交核对金额后点击"支付"

    3

  • 页面会自动跳转至支付平台请按指示登入网上银行进行存款

    4

  • 存款成功后，系统会实时把金额加到您的账户中

    5

注意事项

1.无论何种存款方式，本公司不会接受来自第三方的存款。如本公司收到非账户本人持有人之本人存款，将
会退款至发款方。发款方需要支付有关行政费用。

2.本公司并未收取任何兑换费用

3.任何问题都可以与24小时客服在线处理

取款流程 富达金融提供简单快捷的取款服务，您可以随时登入账户中心完成取款手续。 <script> $(function () { // $("#tab").on('click','li',function(){ // $(this).toggleClass('active').siblings('li').removeClass('active') // }); $("#tab>li .slide-bar").click(function () {//注册资本手风琴效果 $(this).toggleClass('active').siblings('li').removeClass('active') }); $("#tabs>li .slide-bar").click(function () {//取款流程手风琴效果 $(this).toggleClass('actives').siblings('li').removeAttr('actives') }); $("#navbar2>li").click(function () {// 选项卡切换 var $this = $(this); var index = $this.index(); $this.addClass('actives1').siblings("li").removeClass("actives1"); $(".dcontents .dcontentsf").siblings().hide().eq(index).show(); }) }); </script>

Tags:手风 风琴 琴和 和选 
作者：网络　来源：kakaxiD的博客
  • 上一篇：Flex 布局教程：语法篇
  • 下一篇：最常用的HTML标签 总结整理

    • 您可能感兴趣的文章

    • 没有相关文章

    相关评论

    发表我的评论

    • 大名：
    • 内容：