手风琴和选项卡效果

<!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="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/jquery-powerSwitch.js"></script>
</head>
<body>
<div class="nav">
    <div class="nav1">
        <div><img src="images/home_02.png" alt=""/></div>
        <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>
    </div>
</div>
<div class="banner"><img src="images/qw.png" alt=""/></div>
<div class="bodyer">
    <div class="content">
        <div class="cash">注资<span>流程</span></div>
        <div>富达金融提供24小时方便快捷的网上存取服务,如果您已经开通了网上银行存储服务,您可以随时登陆账号,于网上完成存款,金额即将添加到您的交易账户中。</div>
        <div>
            <ul class="tab" id="tab">
                <li class="tab1 ">
                    <div class="slide-bar active">
                        <b></b>

                        <div>按照此登入账户中心,如阁下还没开通真实账户,可按照此申请。</div>
                        <span></span>
                    </div>
                    <div class="content-box content1" >
                        <!--此处放内容-->
                        <div class="d_img"><img src="images/home_02.png" alt=""/></div>
                        <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>
                        <div 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>
                            <div class="dcontents" style="display: block;">
                                <div class="dcontentsf dcontents1" id="dcontents1" >
                                    <!--style=‘display: block;‘-->
                                    <div class="dlogin"><a href="">账户登入</a></div>
                                    <div class="forget"><a href="">忘记密码</a></div>
                                    <div 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>
                                        <div class="dlogin1"><a href="">登陆</a></div>
                                        <div class="dreset"><a href="">重设</a></div>
                                    </div>
                                </div>
                                <div class="dcontentsf" id="dcontents2" style="display: none;">
                                    <!--此处填内容-->
                                    1111111111
                                </div>
                                <div class="dcontentsf" id="dcontents3" style="display: none;">
                                    <!--此处填内容-->
                                    2222222
                                </div>
                                <div class="dcontentsf" id="dcontents4" style="display: none;">
                                    <!--此处填内容-->
                                    333333333333
                                </div>
                                <div class="dcontentsf" id="dcontents5" style="display: none;">
                                    <!--此处填内容-->
                                </div>
                                <div class="dcontentsf" id="dcontents6" style="display: none;">
                                    <!--此处填内容-->
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="tab2" style="clear: both;">
                    <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>
        </div>
        <div>
            <p>注意事项</p>

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

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

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

                    <div>进入账户中心</div>
                    <span></span>
                </div>
                <div class="contents-box">
                    <div class="slide_div1">
                        <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>
                    </div>
                </div>
            </li>
            <li class="tabs2">
                <div class="slide-bar">
                    <b></b>

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

                    <div>选择[取款],输入取款金额并提交</div>
                    <span></span>
                </div>
                <div class="contents-box">
                    3
                    <!--此处放内容-->
                </div>
            </li>
        </ul>
    </div>
</div>
<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>
时间: 2024-08-08 20:35:31

手风琴和选项卡效果的相关文章

CSS3及JS简单实现选项卡效果(适配手机端和pc端)

想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100%; overflow: hidden; } #bottom_box{ width: 100%; height: 50px; background-color: #eee; display: flex; //这是flex布局,父元素设置为flex,子元素设置几等份就是分成几等份 position:

语音导航的tab选项卡效果

前端开发whqet,csdn,王海庆,whqet,前端开发专家 ladies and 乡亲们,程序员同志们,周末仍然坚守工作岗位,或者学习不辍的童鞋们,福音来了. 语音识别高不高端.难不难? 今天给大家推荐一个简单易用的js实现的语音识别框架annyang,然后一个案例示范使用. 在线案例,下载收藏. annyang是一个能够实现语音识别的js类库,小巧易用(仅仅2k),兼容中文.接下来我们看看怎么使用. 首先导入该annyang库,可以使用CDN的方式,也可以下载来使用. <!--下载到本地使

ecshop 实现“精品、新品、热销”板块出现选项卡效果的方法

最近做一个网络商城,直接使用ecshop的免费模板,懒得重新做,ecshop建站多日了,一直想在主页的板块中建网页选项卡鼠标经过自动切换效果,百度搜索这方面的内容也没找到合适的,今天一实验,成功了,所以写出来供ecshop新手参考之用: 1.ecshop自带的选项卡效果(鼠标点击切换): 在后台设置商品分类时,勾选"设置为首页推荐:精品.最新.热门"的某一项后,相应的在首页的"精品.最新.热门"中就会出现"选项卡效果". 不过,默认的选项卡效果是

Javascript进阶篇——总结--DOM案例+选项卡效果

断断续续的把慕课的JavaScript基础和进阶看完了,期间不怎么应用有的都忘记了,接下来多开始写些效果,进行实际应用. 制作一个表格,显示班级的学生信息. 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮,能动态在最后添加一行 3. 点击删除按钮,则删除当前行 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title> new document </ti

javascript 一个页面多个tab选项卡效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>javascript 一个页面多个tab选项卡效果</title> <script> var tab=function(id,event){ var oDiv=document.getElementById(id); var oBtn=oDiv.getElementsByTagName(

一款基于jquery的手风琴图片展示效果

今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="page-container"> <div class="flex-container"> <div class="country netherlands"> <div> Nethe

当transition遇上display(选项卡效果)

下文转自http://www.cnblogs.com/ihardcoder/p/3859026.html 如demo(如果没有显示,请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/)所示,基本的效果是在点击"Translate"按钮后,蓝色区域透明度变为0,然后隐藏display:none:点击Reset按钮后,首先显示蓝色区域display:block,然后透明度逐渐恢复至1,代码如下: 复制代码 1 var btn1 = $("#

选项卡效果

例子一. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>选项卡效果</title> 6 <script type="text/javascript" src="jquery.min.js"></script> 7 <

WPF实现选项卡效果(1)——使用AvalonDock

简介 公司最近一个项目,软件采用WPF开发,需要实现类似于VS的选项卡(或者是浏览器的选项卡)效果.搜寻诸多资料后,发现很多同仁推荐AvalonDock这款开源控件.在其官方地址下载源码和Demo后,对其进行了初步的研究,初步实现了预期效果. AvalonDocking的结构树 在下载的Demo中,我们可以发现AvalonDock的可视化结构树如下: <avalon:DockingManager x:Name="dockingManager"> <avalon:Lay