iframe 小试

1.引入jquery 方便使用工厂函数


iframe的

属性

new : HTML5 中的新属性。

属性 描述
align
  • left
  • right
  • top
  • middle
  • bottom

不赞成使用。请使用样式代替。

规定如何根据周围的元素来对齐此框架。

frameborder
  • 1
  • 0
规定是否显示框架周围的边框。
height
  • pixels
  • %
规定 iframe 的高度。
longdesc URL 规定一个页面,该页面包含了有关 iframe 的较长描述。
marginheight pixels 定义 iframe 的顶部和底部的边距。
marginwidth pixels 定义 iframe 的左侧和右侧的边距。
name frame_name 规定 iframe 的名称。
sandbox
  • ""
  • allow-forms
  • allow-same-origin
  • allow-scripts
  • allow-top-navigation
启用一系列对 <iframe> 中内容的额外限制。
scrolling
  • yes
  • no
  • auto
规定是否在 iframe 中显示滚动条。
seamless seamless 规定 <iframe> 看上去像是包含文档的一部分。
src URL 规定在 iframe 中显示的文档的 URL。
srcdoc HTML_code 规定在 <iframe> 中显示的页面的 HTML 内容。
width
  • pixels
  • %
定义 iframe 的宽度。

2.模拟.html编写

<!DOCTYPE html>
<!-- saved from url=(0074)http://www.cmeplaza.com/cme-mh-app/portals/applied_economy_experience1.htm -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>中机商圈—国际智能工业云平台</title>
    <link rel="stylesheet" href="mh-common.css">
    <link rel="stylesheet" href="mh-public.css">
    <link rel="stylesheet" href="public(2).css">
    <style type="text/css">
        *{font-size: 12px;}
        .experience-main{margin:20px 3px;height: 292px;}
        .experience-main .iframemain .form-check .check-box .check-curr{line-height: 50px}
        .experience-main .tab-tit{}
        .experience-main .tab-tit span{display: inline-block; margin-bottom: 10px;}
        .experience-main .tab-tit span a{display: inline-block;height: 34px;line-height: 34px;border: 1px solid #aaa;color: #3e3e3e;font-size: 14px;padding: 0 22px;border-radius: 17px;}
        .experience-main .tab-tit span.curr a{border: 1px solid #37a7ff;background: #37a7ff; color: #fff;}
        .experience-main .tab-tit .arrow{width: 25px;height: 36px;vertical-align: bottom; margin-left: -5px;}
        .experience-main .iframemain{}
        /*第一步:填写企业信息 开始*/
        .experience-main .iframemain .form-text .tit{width: 100px;}
        .experience-main .iframemain .form-secelt .tit{width: 100px;}
        .experience-main .iframemain .form-radio .tit{width: 100px;}
        .experience-main .iframemain .form-secelt .secelt-box{margin-right: 10px;background: none;}
        .experience-main .iframemain .form-secelt.address .secelt-box{width: 150px;}

        .experience-main .tab-tit span{display: inline-block; margin-bottom: 10px;}
        .experience-main .tab-tit span a{display: inline-block;height: 34px;line-height: 34px;border: 1px solid #aaa;color: #3e3e3e;font-size: 14px;padding: 0 8px;border-radius: 17px;}
        .experience-main .iframemain .pay-step1 { margin-top: 20px; margin-left: 20px;}

        .experience-main .iframemain .pay-step1 .form-radio{ margin-top: 5px;}
        .experience-main .iframemain .pay-step1 .form-check{ margin-top: 5px;}
        .experience-main .iframemain .pay-step1 .form-check .tit{ line-height: 50px; margin-right: 20px;}
        .experience-main .iframemain .pay-step1 .form-check .check-box{ width: 650px;}
        .experience-main .iframemain .pay-step1 .form-check .check-box .check{line-height: 50px;}
        .experience-main .iframemain .pay-step1 .button-next{ margin-top: 30px;}
        .experience-main .iframemain .pay-step1 .button-next a{ margin-right:50px; width: 120px; height: 40px; background: #37a7ff; border-radius:4px; color: #fff; display: inline-block; text-align: center; line-height: 40px;}
        .experience-main .iframemain .pay-step1 .button-next a:hover{ text-decoration: underline;}
        .experience-main .iframemain .pay-step1 .button-previou .yellow{ background: #ff9932;}
        .experience-main .iframemain .pay-step1 .button-previou{ margin-left: 250px;}
        .experience-main .iframemain .pay-step1 .more{ margin-left: 150px; margin-top:10px;}
        .experience-main .iframemain .pay-step1 .more a{ background: #f7f7f7; border: #ddd solid 1px; padding: 5px 10px; text-align: center;line-height: 30px; margin-left: 30px; margin-top: 30px;}
        .experience-main .iframemain .pay-step1 .center{ margin-top: 10px; margin-left: 20px;}
        .experience-main .iframemain .pay-step1 .button-next{ margin-top: 30px; margin-left: 260px;}
        .experience-main .iframemain .pay-step1 .button-next a{ margin-right:50px; width: 100px; height: 30px; background: #37a7ff; border-radius:4px; color: #fff; display: inline-block; text-align: center; line-height: 30px;}
        .experience-main .iframemain .pay-step1 .button-next a:hover{ text-decoration: underline;}
        .experience-main .iframemain .pay-step1 .button-previou .yellow{ background: #ff9932;}
        .experience-main .iframemain .pay-step1 .button-previou{ margin-left: 250px;}
        /*第一步:填写企业信息 结束*/

        /*第二步:选择支付场景 开始*/

        .experience-main .iframemain .pay-step1.form-radio{}
        .experience-main .iframemain .pay-step1 .form-radio .tit{ line-height: 50px; margin-right: 20px;}
        .experience-main .iframemain .pay-step1 .form-radio .radio-box{ width: 680px;}
        .experience-main .iframemain .pay-step1 .form-radio .radio-box img{ width:741px;margin-left: 40px;}
        .experience-main .iframemain .pay-step1 .form-radio .radio-box .radio{line-height: 50px;}
        .experience-main .iframemain .operation-step1 .more{ margin-left: 150px; margin-top:10px;}
        .experience-main .iframemain .operation-step1 .more a{ background: #f7f7f7; border: #ddd solid 1px; padding: 5px 10px; text-align: center;line-height: 30px; margin-left: 30px; margin-top: 30px;}
        /*第二步:选择支付场景 结束*/

        /*第四步:场景应用 开始*/
        .experience-main .iframemain .pay-step1{ margin-top: 20px; margin-left: 20px;}
        .experience-main .iframemain .pay-step1 .pic { width: 130px; height:30px; line-height: 30px; text-align: center; background:url(/cme-mh-app/resources/images/pay_index_experience_img01.png) no-repeat; margin-top: 20px; margin-left: 30px;}
        /*第四步:场景应用 结束*/

        /*第五步:平台结算 开始*/
        .experience-main .iframemain .iframemain-box .form-radio-new{}
        .experience-main .iframemain .iframemain-box .form-radio-new .tit{width: 100px;height:26px;line-height:26px;text-align: right;margin-right: 5px;}
        .experience-main .iframemain .iframemain-box .form-radio-new .radio-box-new .radio-area{float:left;width:130px;}
        .experience-main .iframemain .iframemain-box .form-radio-new .radio-box-new .radio-area .radio {background: url(/cme-mh-app/resources/images/icons/experience_form_radio.png) no-repeat left center;height: 26px;padding-left: 15px; line-height:26px;}
        .experience-main .iframemain .iframemain-box .form-radio-new .radio-box-new .radio-area .radio-curr {background: url(/cme-mh-app/resources/images/icons/experience_form_radio_on.png) no-repeat left center;height: 26px;padding-left: 15px; line-height:26px;}
        .experience-main .iframemain .iframemain-box .form-radio-new .radio-box-new .upload-area{float:left;}
        .experience-main .iframemain .iframemain-box .form-radio-new .radio-box-new .upload-area .upload-box{float:left;}
        .experience-main .iframemain .iframemain-box .form-radio-new .radio-box-new .upload-area .upload-box .input-text{height: 24px;width: 246px;border: 1px solid #aaa;}
        .experience-main .iframemain .iframemain-box .form-radio-new .radio-box-new .upload-area .upload-btn{ float:left;margin-left: 10px;}
        .experience-main .iframemain .iframemain-box .form-radio-new .radio-box-new .upload-area .upload-btn a{ display:block;height: 26px;line-height:26px;background: #37a7ff; width: 80px; border-radius: 3px;text-align: center;color:#fff;}
        .experience-main .iframemain .iframemain-box .form-radio-new .radio-box-new .upload-area-three{float:left;}
        .experience-main .iframemain .iframemain-box .form-radio-new .radio-box-new .upload-area-three .upload-box{float:left;height:26px;line-height:26px;color:#fff;}
        .experience-main .iframemain .iframemain-box .form-radio-new .radio-box-new .upload-area-three .upload-box span{padding:0 10px;}
        .experience-main .iframemain .iframemain-box .form-radio-new .radio-box-new .upload-area-three .upload-box .input-text{height: 24px;width: 180px;border: 1px solid #aaa;border-left: 0px solid #aaa;}
        .experience-main .iframemain .iframemain-box .form-radio-new .radio-box-new .upload-area-three .upload-btn{ float:left;}
        .experience-main .iframemain .iframemain-box .form-radio-new .radio-box-new .upload-area-three .upload-btn a{ display:block;height: 26px;line-height:26px;background: #37a7ff; width: 80px; border-radius: 3px;text-align: center;color:#fff;}
        /*第五步:平台结算 结束*/

        /*第六步:拥有我的支付平台 开始*/
        .experience-main .iframemain .pay-step1{ margin-top: 20px; margin-left: 20px;}
        .experience-main .iframemain .pay-step1 .tit2-bg { font-size: 16px; background: #daefff; padding: 3px 15px; height:30px; line-height: 30px; text-align: center; margin-top: 20px; margin-right: 30px;}
        .experience-main .iframemain .pay-step1 .form-con{}
        .experience-main .iframemain .pay-step1 .form-con .con-box{ margin-top: 20px; margin-left: 150px;}
        .experience-main .iframemain .pay-step1 .form-con .con-box span{ font-size: 14px; color: #333333; border: solid #ddd 1px; background: #fafafa; padding: 5px 20px; display: inline-block; margin-right: 20px;}
        .experience-main .iframemain .pay-step1 .form-con{ margin-top: 20px; margin-left: 20px;}
        .experience-main .iframemain .risk-experience1-step3 .risk-experience1-step3-button{ margin: 0 auto;  margin-top:30px; width:250px; }
        .experience-main .iframemain .risk-experience1-step3 .risk-experience1-step3-button a{background: #37A7FF; padding:0px 20px 0px 20px; color: #fff; border-radius: 5px; text-align:center; line-height: 30px;display: inline-block;}
        /*第六步:拥有我的支付平台 结束*/




        .recom-img img {  transition: all 3s;}
        .recom-img img:hover{
            width: 500px;
        }
    </style>
</head>
<body>
<div style="width: 210px; height: 250px; margin-left: auto; margin-right: auto;" ><img class="recom-img" style=" overflow: hidden;"  src="images/personal_platform_list_pre05.png"/></div>
<div class="experience-main">
    <div class="tab-tit">
        <span class="curr"><a href="javascript:;">秒填基本信息</a></span>
        <span class="arrow"></span>
        <span><a href="javascript:;">配置平台区块</a></span>
        <span class="arrow"></span>
        <span><a href="javascript:;">加载平台资源</a></span>
        <span class="arrow"></span>
        <span><a href="javascript:;">引流激活</a></span>
        <span class="arrow"></span>
        <span><a href="javascript:;">运营转让</a></span>
    </div>
    <div class="iframemain">
        <!--第一步:秒填基本信息 开始-->
        <div class="pay-step1">
            <div class="iframemain-box" style="margin-left: 50px">
                <div class="form-text">
                    <div class="fl tit"><span></span>用户名称:</div>
                    <div class="fl text-box"><input type="text" class="input-text" placeholder="请输入用户名称"></div>
                    <div class="clear"></div>
                </div>
                <div class="form-secelt">
                    <div class="fl tit"><span></span>产业行业:</div>
                    <select class="fl secelt-box">
                        <option>经济专业</option>
                        <option>项目服务</option>
                    </select>
                    <select class="fl secelt-box">
                        <option>应用经济</option>
                        <option>财务和审计</option>
                    </select>
                    <div class="clear"></div>
                </div>
                <div class="form-secelt">
                    <div class="fl tit"><span></span>服务领域:</div>
                    <select class="fl secelt-box">
                        <option>请选择</option>
                    </select>
                    <select class="fl secelt-box">
                        <option>请选择</option>
                    </select>
                    <div class="clear"></div>
                </div>
                <div class="task-01" style="margin-left: -61px;">
                    <div class="experience1-application">
                        <div class="form-textarea">
                            <div class="fl tit">经营范围 :</div>
                            <div class="fl textarea-box"><textarea class="textarea" style="resize: none;"></textarea></div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </div>
                <div class="form-text">
                    <div class="fl tit"><span></span>固定电话:</div>
                    <div class="fl text-box"><input type="text" class="input-text" style="width: 55px;"><span>&nbsp;-&nbsp;</span></div>
                    <div class="fl text-box"><input type="text" class="input-text" style="width: 100px;"><span>&nbsp;-&nbsp;</span></div>
                    <div class="fl text-box"><input type="text" class="input-text"></div>
                    <div class="clear"></div>
                </div>
                <div class="form-text">
                    <div class="fl tit"><span></span>手机:</div>
                    <div class="fl text-box"><input type="text" class="input-text" placeholder="请输入手机号码"></div>
                    <div class="fl tit"><span></span>邮箱:</div>
                    <div class="fl text-box"><input type="text" class="input-text" placeholder="请输入邮箱"></div>
                    <div class="clear"></div>
                </div>
                <div class="form-secelt address">
                    <div class="fl tit"><span></span>联系地址:</div>
                    <select class="fl secelt-box">
                        <option>中国</option>
                        <option>美国</option>
                        <option>澳大利亚</option>
                    </select>
                    <select class="fl secelt-box">
                        <option>北京市</option>
                        <option>河南省</option>
                        <option>上海市</option>
                    </select>
                    <select class="fl secelt-box">
                        <option>海淀区</option>
                        <option>郑州</option>
                        <option>南阳</option>
                    </select>
                    <div class="clear"></div>
                    <div class="form-text">
                        <div class="fl tit">&nbsp;</div>
                        <div class="fl text-box"><input type="text" placeholder="请输入详细地址" class="input-text"></div>
                        <div class="clear"></div>
                    </div>
                </div>
            </div>
            <div class="button-next" style="margin-left:350px;">
                <a href="javascript:;" class="next">下一步</a>
            </div>
        </div>
        <!--第一步:秒填基本信息 结束-->

        <!--第二步:配置平台区块 开始-->
        <div class="pay-step1" style="display: none;">
            <div class="form-check">
                <div class="fl tit">选择操作终端:</div>
                <div class="fl check-box">
                    <div>
                        <span class="check-curr">PC Web端</span>
                        <span class="check">PC客户端</span>
                        <span class="check">移动端</span>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="form-check">
                <div class="fl tit">选择展示区块:</div>
                <div class="fl check-box">
                    <div>
                        <span class="check-curr">导航栏目</span>
                        <span class="check">Banner区</span>
                        <span class="check">平台区块</span>
                        <span class="check-curr">产品区块</span>
                        <span class="check">应用区块</span>
                        <span class="check-curr">方案区块</span>
                    </div>
                    <div>
                        <span class="check">信息区块</span>
                        <span class="check">用户区块</span>
                        <span class="check">行情区块</span>
                        <span class="check">指标区块</span>
                        <span class="check">培训区块</span>
                        <span class="check">图书区块</span>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="form-check">
                <div class="fl tit">选择平台类型:</div>
                <div class="fl check-box">
                    <div>
                        <span class="check-curr">商圈平台</span>
                        <span class="check">商城平台</span>
                        <span class="check">量子对冲</span>
                        <span class="check">智慧法律</span>
                        <span class="check">智付平台</span>
                        <span class="check">运营维护</span>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="form-check">
                <div class="fl tit">选择智能应用:</div>
                <div class="fl check-box" flag="toolsBox">
                    <div>
                        <span class="check-curr" title="人事管理系统" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">人事管理系统</span> <span class="check" title="在线谈判" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">在线谈判</span> <span class="check" title="需求发布系统" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">需求发布系统</span> <span class="check-curr" title="订单管理系统" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">订单管理系统</span> <span class="check" title="项目文件管理" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">项目文件管理</span>
                    </div>
                    <div>
                        <span class="check-curr" title="合同管理系统" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">合同管理系统</span> <span class="check" title="全过程造价咨询管理系统" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">全过程造价咨询管理系统</span> <span class="check" title="工程材料管理系统" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">工程材料管理系统</span> <span class="check" title="在线会议" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">在线会议</span>
                    </div>
                    <div>
                        <span class="check" title="云桌面" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">云桌面</span> <span class="check" title="云存储" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">云存储</span> <span class="check" title="算量软件" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">算量软件</span> <span class="check" title="计价软件" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">计价软件</span> <span class="check" title="造价管理系统" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">造价管理系统</span> <span class="check" title="BIM" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">BIM</span>
                    </div>
                    <div>
                        <span class="check" title="Auto CAD" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">Auto CAD</span>
                        <span class="check" title="智付应用" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">智付应用</span>
                        <span class="check" title="任务管理系统" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">任务管理系统</span>
                        <span class="check" title="电子文件管理系统" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">电子文件管理系统</span>
                        <span class="check" title="流程管理系统" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">流程管理系统</span>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="button-next" style="margin-left:260px;">
                <a href="javascript:;" style="background:#ffb366;;" class="before">上一步</a>
                <a href="javascript:;" class="next">下一步</a>
            </div>
        </div>
        <!--第二步:配置平台区块 结束-->

        <!--第三步:加载平台资源 开始-->
        <div class="pay-step1" style="display: none;">
            <div class="iframemain-box" style="margin-left: 50px">
                <div class="form-radio">
                    <div class="fl tit">选择资源类型:</div>
                    <div class="fl radio-box">
                        <div>
                            <span class="radio">服务</span>
                            <span class="radio">方案</span>
                            <span class="radio-curr">企业信息</span>
                            <span class="radio">动态新闻</span>
                            <span class="radio">项目</span>
                            <span class="radio">图书</span>
                            <span class="radio">产品</span>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="form-radio-new" style="padding-top:20px;">
                    <div class="fl tit" style="color:#666;">导入数据:</div>
                    <div class="fl radio-box-new">
                        <div class="radio-info">
                            <div class="upload-area">
                                <div style="width: 300px;">
                                    <div class="upload-box"><input type="text" class="input-text" readonly="" placeholder=""></div>
                                    <div class="upload-btn" style="position:relative;">
                                        <a href="javascript:;" style="position:absolute; top:0; left:0;">点击上传</a>
                                        <input type="file" style="position:absolute; top:0; left:0; width:80px; height:26px; opacity:0; filter:alpha(opacity=0);">
                                    </div>
                                    <div class="clear"></div>
                                </div>
                                <div style="line-height:20px;color:#999;margin-top:5px;">支持Excel、CSV格式导入数据</div>
                            </div>
                            <div class="clear"></div>
                        </div>

                    </div>
                    <div class="clear"></div>
                </div>
                <div class="button-next" style="margin-left:260px;">
                    <a href="javascript:;" style="background:#ffb366;;" class="before">上一步</a>
                    <a href="javascript:;" class="next">下一步</a>
                </div>
            </div>
        </div>
        <!--第三步:加载平台资源 结束-->

        <!--第四步:引流激活 开始-->
        <div class="pay-step1" style="display: none;">
            <div class="form-check">
                <div class="fl tit">引流方式:</div>
                <div class="fl check-box" flag="toolsBox">
                    <div>
                        <span class="check-curr" title="风暴矩阵" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">风暴矩阵</span>
                        <span class="check" title="云课堂" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">云课堂</span>
                        <span class="check" title="圈媒体" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">圈媒体</span>
                        <span class="check" title="公告" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">公告</span>
                        <span class="check" title="专家培训" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">专家培训</span>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="form-check">
                <div class="fl tit">激活平台:</div>
                <div class="fl check-box" flag="toolsBox">
                    <div>
                        <span class="check-curr" title="会员入驻" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">会员入驻</span>
                        <span class="check" title="在线交流" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">在线交流</span>
                        <span class="check" title="创建商圈" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">创建商圈</span>
                        <span class="check-curr" title="策划营销" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">策划营销</span>
                        <span class="check" title="分享信息" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">分享信息</span>
                        <span class="check" title="资源共享" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">资源共享</span>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="button-next" style="margin-left:260px;">
                <a href="javascript:;" style="background:#ffb366;;" class="before">上一步</a>
                <a href="javascript:;" class="next">下一步</a>
            </div>
        </div>
        <!--第四步:引流激活 结束-->

        <!--第五步:转让/使用 开始-->
        <div class="risk-experience1-step3" style="display: none; margin-top: 53px; margin-left: -100px;">
            <div class="experience2-cecommend">
                <div class="form-check" style="margin-left:100px;">
                    <div class="fl tit">运营模式:</div>
                    <div class="fl check-box">
                        <span class="check demage">自主维护</span>
                        <span class="check-curr demage">委托维护</span>
                        <span class="check demage">合作维护</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="experience2-cecommend">
                <div class="form-check" style="margin-left:100px;">
                    <div class="fl tit">转让模式:</div>
                    <div class="fl check-box">
                        <span class="check demage">封装模板</span>
                        <span class="check-curr demage">研发平台商圈</span>
                        <span class="check demage">出租平台</span>
                        <span class="check-curr demage">营销推广</span>
                        <span class="check demage">出售平台</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="risk-experience1-step3-button" style="width: 283px; margin-left: 400px;">
                <a href="javascript:;" style="margin-right: 40px; background: #ffb759;" class="before" flag="prev">上一步</a>
                <a href="javascript:;" class="next_btn" do="last">进入应用经济平台</a>
            </div>
        </div>
        <!--第五步:转让/使用 结束-->
    </div>
</div>

<script type="text/javascript" src="jquery.min(1).js"></script>
<script type="text/javascript" src="domain.js"></script>
<script type="text/javascript" src="tools.js"></script>
<script type="text/javascript">
    $(function(){

        //切换
        $('.experience-main .tab-tit span[class!="arrow"]').each(function() {
            $(this).click(function() {
                var index = $(this).index() / 2;
                $(this).siblings("span").removeClass('curr');
                $(this).addClass('curr');
                $('.iframemain>div').hide();
                $('.iframemain>div').eq(index).show();
            });
        });
        //秒添基本信息
        //下一步
        $(".iframemain .pay-step1").eq(0).find(".button-next a").click(function(){
            $(".iframemain .pay-step1").eq(0).hide();
            $(".iframemain .pay-step1").eq(1).show();
            $(".experience-main .tab-tit > span").eq(2).addClass("curr").siblings("span").removeClass("curr");
        });

        //配置平台区块
        //下一步
        $(".iframemain .pay-step1").eq(1).find(".button-next .next").click(function(){
            $(".iframemain .pay-step1").eq(1).hide();
            $(".iframemain .pay-step1").eq(2).show();
            $(".experience-main .tab-tit > span").eq(4).addClass("curr").siblings("span").removeClass("curr");
        });
        //上一步
        $(".iframemain .pay-step1").eq(1).find(".button-next .before").click(function(){
            $(".iframemain .pay-step1").eq(1).hide();
            $(".iframemain .pay-step1").eq(0).show();
            $(".experience-main .tab-tit > span").eq(0).addClass("curr").siblings("span").removeClass("curr");
        });

        //加载平台资源
        //下一步
        $(".iframemain .pay-step1").eq(2).find(".button-next .next").click(function(){
            $(".iframemain .pay-step1").eq(2).hide();
            $(".iframemain .pay-step1").eq(3).show();
            $(".experience-main .tab-tit > span").eq(6).addClass("curr").siblings("span").removeClass("curr");
        });
        //上一步
        $(".iframemain .pay-step1").eq(2).find(".button-next .before").click(function(){
            $(".iframemain .pay-step1").eq(2).hide();
            $(".iframemain .pay-step1").eq(1).show();
            $(".experience-main .tab-tit > span").eq(2).addClass("curr").siblings("span").removeClass("curr");
        });

        //引流激活
        //下一步
        $(".iframemain .pay-step1").eq(3).find(".button-next .next").click(function(){
            $(".iframemain .pay-step1").eq(3).hide();
            $(".risk-experience1-step3").show();
            $(".experience-main .tab-tit > span").eq(8).addClass("curr").siblings("span").removeClass("curr");
        });
        //上一步
        $(".iframemain .pay-step1").eq(3).find(".button-next .before").click(function(){
            $(".iframemain .pay-step1").eq(3).hide();
            $(".iframemain .pay-step1").eq(2).show();
            $(".experience-main .tab-tit > span").eq(4).addClass("curr").siblings("span").removeClass("curr");
        });


        //运营转让
        //下一步
        $(".iframemain .risk-experience1-step3").eq(0).find(".risk-experience1-step3-button .next_btn").click(function(){
            $('div[flag="toolsBox"]').applicationTools();
            eachTools();
        });
        //上一步
        $(".iframemain .risk-experience1-step3").eq(0).find(".risk-experience1-step3-button .before").click(function(){
            $(".risk-experience1-step3").hide();
            $(".iframemain .pay-step1").eq(3).show();
            $(".experience-main .tab-tit > span").eq(6).addClass("curr").siblings("span").removeClass("curr");
        });



        //下拉选择
        $(".secelt-box").click(function(e){
            e.preventDefault();
            e.stopPropagation();
            $(this).find(".secelt-option").show();
        });
        $(".secelt-option").find("a").click(function(e){
            e.preventDefault();
            e.stopPropagation();
            $(this).parents(".secelt-box").find("a.show").html($(this).html());
            $(this).parents(".secelt-option").hide();
        })
        $(".secelt-option").hover(function(){},function(){
            $(this).hide();
        })
        //复选框
        $(".check-box span").click(function(){
            if($(this).hasClass("check-curr")){
                $(this).removeClass("check-curr");
                $(this).addClass("check");
            }else{
                $(this).addClass("check-curr");
                $(this).removeClass("check");
            }
        })
        //单选按钮
        $(".radio-box span").click(function(){
            if($(this).hasClass("radio-curr")){
                $(this).removeClass("radio-curr");
                $(this).addClass("radio");
            }else{
                $(this).addClass("radio-curr");
                $(this).removeClass("radio");
                $(this).siblings().removeClass("radio-curr").addClass("radio");
            }
        })
        //上传文件
        $('input[type="file"]').change(function(){
            $(this).parents(".upload-btn").siblings(".upload-box").find("input").val($(this).val());
        })
    })
</script>
</body></html>



3.模拟2.html


<!DOCTYPE html>
<!-- saved from url=(0074)http://www.cmeplaza.com/cme-mh-app/portals/applied_economy_experience1.htm -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>中机商圈—国际智能工业云平台</title>
    <link rel="stylesheet" href="mh-common.css">
    <link rel="stylesheet" href="mh-public.css">
    <link rel="stylesheet" href="public(2).css">
    <style type="text/css">
        *{font-size: 12px;}
        .experience-main{margin:20px 3px;height: 292px;}
        .experience-main .iframemain .form-check .check-box .check-curr{line-height: 50px}
        .experience-main .tab-tit{}
        .experience-main .tab-tit span{display: inline-block; margin-bottom: 10px;}
        .experience-main .tab-tit span a{display: inline-block;height: 34px;line-height: 34px;border: 1px solid #aaa;color: #3e3e3e;font-size: 14px;padding: 0 22px;border-radius: 17px;}
        .experience-main .tab-tit span.curr a{border: 1px solid #37a7ff;background: #37a7ff; color: #fff;}
        .experience-main .tab-tit .arrow{width: 25px;height: 36px;vertical-align: bottom; margin-left: -5px;}
        .experience-main .iframemain{}
        /*第一步:填写企业信息 开始*/
        .experience-main .iframemain .form-text .tit{width: 100px;}
        .experience-main .iframemain .form-secelt .tit{width: 100px;}
        .experience-main .iframemain .form-radio .tit{width: 100px;}
        .experience-main .iframemain .form-secelt .secelt-box{margin-right: 10px;background: none;}
        .experience-main .iframemain .form-secelt.address .secelt-box{width: 150px;}

        .experience-main .tab-tit span{display: inline-block; margin-bottom: 10px;}
        .experience-main .tab-tit span a{display: inline-block;height: 34px;line-height: 34px;border: 1px solid #aaa;color: #3e3e3e;font-size: 14px;padding: 0 8px;border-radius: 17px;}
        .experience-main .iframemain .pay-step1 { margin-top: 20px; margin-left: 20px;}

        .experience-main .iframemain .pay-step1 .form-radio{ margin-top: 5px;}
        .experience-main .iframemain .pay-step1 .form-check{ margin-top: 5px;}
        .experience-main .iframemain .pay-step1 .form-check .tit{ line-height: 50px; margin-right: 20px;}
        .experience-main .iframemain .pay-step1 .form-check .check-box{ width: 650px;}
        .experience-main .iframemain .pay-step1 .form-check .check-box .check{line-height: 50px;}
        .experience-main .iframemain .pay-step1 .button-next{ margin-top: 30px;}
        .experience-main .iframemain .pay-step1 .button-next a{ margin-right:50px; width: 120px; height: 40px; background: #37a7ff; border-radius:4px; color: #fff; display: inline-block; text-align: center; line-height: 40px;}
        .experience-main .iframemain .pay-step1 .button-next a:hover{ text-decoration: underline;}
        .experience-main .iframemain .pay-step1 .button-previou .yellow{ background: #ff9932;}
        .experience-main .iframemain .pay-step1 .button-previou{ margin-left: 250px;}
        .experience-main .iframemain .pay-step1 .more{ margin-left: 150px; margin-top:10px;}
        .experience-main .iframemain .pay-step1 .more a{ background: #f7f7f7; border: #ddd solid 1px; padding: 5px 10px; text-align: center;line-height: 30px; margin-left: 30px; margin-top: 30px;}
        .experience-main .iframemain .pay-step1 .center{ margin-top: 10px; margin-left: 20px;}
        .experience-main .iframemain .pay-step1 .button-next{ margin-top: 30px; margin-left: 260px;}
        .experience-main .iframemain .pay-step1 .button-next a{ margin-right:50px; width: 100px; height: 30px; background: #37a7ff; border-radius:4px; color: #fff; display: inline-block; text-align: center; line-height: 30px;}
        .experience-main .iframemain .pay-step1 .button-next a:hover{ text-decoration: underline;}
        .experience-main .iframemain .pay-step1 .button-previou .yellow{ background: #ff9932;}
        .experience-main .iframemain .pay-step1 .button-previou{ margin-left: 250px;}
        /*第一步:填写企业信息 结束*/

        /*第二步:选择支付场景 开始*/

        .experience-main .iframemain .pay-step1.form-radio{}
        .experience-main .iframemain .pay-step1 .form-radio .tit{ line-height: 50px; margin-right: 20px;}
        .experience-main .iframemain .pay-step1 .form-radio .radio-box{ width: 680px;}
        .experience-main .iframemain .pay-step1 .form-radio .radio-box img{ width:741px;margin-left: 40px;}
        .experience-main .iframemain .pay-step1 .form-radio .radio-box .radio{line-height: 50px;}
        .experience-main .iframemain .operation-step1 .more{ margin-left: 150px; margin-top:10px;}
        .experience-main .iframemain .operation-step1 .more a{ background: #f7f7f7; border: #ddd solid 1px; padding: 5px 10px; text-align: center;line-height: 30px; margin-left: 30px; margin-top: 30px;}
        /*第二步:选择支付场景 结束*/

        /*第四步:场景应用 开始*/
        .experience-main .iframemain .pay-step1{ margin-top: 20px; margin-left: 20px;}
        .experience-main .iframemain .pay-step1 .pic { width: 130px; height:30px; line-height: 30px; text-align: center; background:url(/cme-mh-app/resources/images/pay_index_experience_img01.png) no-repeat; margin-top: 20px; margin-left: 30px;}
        /*第四步:场景应用 结束*/

        /*第五步:平台结算 开始*/
        .experience-main .iframemain .iframemain-box .form-radio-new{}
        .experience-main .iframemain .iframemain-box .form-radio-new .tit{width: 100px;height:26px;line-height:26px;text-align: right;margin-right: 5px;}
        .experience-main .iframemain .iframemain-box .form-radio-new .radio-box-new .radio-area{float:left;width:130px;}
        .experience-main .iframemain .iframemain-box .form-radio-new .radio-box-new .radio-area .radio {background: url(/cme-mh-app/resources/images/icons/experience_form_radio.png) no-repeat left center;height: 26px;padding-left: 15px; line-height:26px;}
        .experience-main .iframemain .iframemain-box .form-radio-new .radio-box-new .radio-area .radio-curr {background: url(/cme-mh-app/resources/images/icons/experience_form_radio_on.png) no-repeat left center;height: 26px;padding-left: 15px; line-height:26px;}
        .experience-main .iframemain .iframemain-box .form-radio-new .radio-box-new .upload-area{float:left;}
        .experience-main .iframemain .iframemain-box .form-radio-new .radio-box-new .upload-area .upload-box{float:left;}
        .experience-main .iframemain .iframemain-box .form-radio-new .radio-box-new .upload-area .upload-box .input-text{height: 24px;width: 246px;border: 1px solid #aaa;}
        .experience-main .iframemain .iframemain-box .form-radio-new .radio-box-new .upload-area .upload-btn{ float:left;margin-left: 10px;}
        .experience-main .iframemain .iframemain-box .form-radio-new .radio-box-new .upload-area .upload-btn a{ display:block;height: 26px;line-height:26px;background: #37a7ff; width: 80px; border-radius: 3px;text-align: center;color:#fff;}
        .experience-main .iframemain .iframemain-box .form-radio-new .radio-box-new .upload-area-three{float:left;}
        .experience-main .iframemain .iframemain-box .form-radio-new .radio-box-new .upload-area-three .upload-box{float:left;height:26px;line-height:26px;color:#fff;}
        .experience-main .iframemain .iframemain-box .form-radio-new .radio-box-new .upload-area-three .upload-box span{padding:0 10px;}
        .experience-main .iframemain .iframemain-box .form-radio-new .radio-box-new .upload-area-three .upload-box .input-text{height: 24px;width: 180px;border: 1px solid #aaa;border-left: 0px solid #aaa;}
        .experience-main .iframemain .iframemain-box .form-radio-new .radio-box-new .upload-area-three .upload-btn{ float:left;}
        .experience-main .iframemain .iframemain-box .form-radio-new .radio-box-new .upload-area-three .upload-btn a{ display:block;height: 26px;line-height:26px;background: #37a7ff; width: 80px; border-radius: 3px;text-align: center;color:#fff;}
        /*第五步:平台结算 结束*/

        /*第六步:拥有我的支付平台 开始*/
        .experience-main .iframemain .pay-step1{ margin-top: 20px; margin-left: 20px;}
        .experience-main .iframemain .pay-step1 .tit2-bg { font-size: 16px; background: #daefff; padding: 3px 15px; height:30px; line-height: 30px; text-align: center; margin-top: 20px; margin-right: 30px;}
        .experience-main .iframemain .pay-step1 .form-con{}
        .experience-main .iframemain .pay-step1 .form-con .con-box{ margin-top: 20px; margin-left: 150px;}
        .experience-main .iframemain .pay-step1 .form-con .con-box span{ font-size: 14px; color: #333333; border: solid #ddd 1px; background: #fafafa; padding: 5px 20px; display: inline-block; margin-right: 20px;}
        .experience-main .iframemain .pay-step1 .form-con{ margin-top: 20px; margin-left: 20px;}
        .experience-main .iframemain .risk-experience1-step3 .risk-experience1-step3-button{ margin: 0 auto;  margin-top:30px; width:250px; }
        .experience-main .iframemain .risk-experience1-step3 .risk-experience1-step3-button a{background: #37A7FF; padding:0px 20px 0px 20px; color: #fff; border-radius: 5px; text-align:center; line-height: 30px;display: inline-block;}
        /*第六步:拥有我的支付平台 结束*/




        .recom-img img {  transition: all 3s;}
        .recom-img img:hover{
            width: 500px;
        }
    </style>
</head>
<body>
<div class="experience-main">
    <div class="tab-tit">
        <span class="curr"><a href="javascript:;">秒填基本信息</a></span>
        <span class="arrow"></span>
        <span><a href="javascript:;">配置平台区块</a></span>
        <span class="arrow"></span>
        <span><a href="javascript:;">加载平台资源</a></span>
        <span class="arrow"></span>
        <span><a href="javascript:;">引流激活</a></span>
        <span class="arrow"></span>
        <span><a href="javascript:;">运营转让</a></span>
    </div>
    <div class="iframemain">
        <!--第一步:秒填基本信息 开始-->
        <div class="pay-step1">
            <div class="iframemain-box" style="margin-left: 50px">
                <div class="form-text">
                    <div class="fl tit"><span></span>用户名称:</div>
                    <div class="fl text-box"><input type="text" class="input-text" placeholder="请输入用户名称"></div>
                    <div class="clear"></div>
                </div>
                <div class="form-secelt">
                    <div class="fl tit"><span></span>产业行业:</div>
                    <select class="fl secelt-box">
                        <option>经济专业</option>
                        <option>项目服务</option>
                    </select>
                    <select class="fl secelt-box">
                        <option>应用经济</option>
                        <option>财务和审计</option>
                    </select>
                    <div class="clear"></div>
                </div>
                <div class="form-secelt">
                    <div class="fl tit"><span></span>服务领域:</div>
                    <select class="fl secelt-box">
                        <option>请选择</option>
                    </select>
                    <select class="fl secelt-box">
                        <option>请选择</option>
                    </select>
                    <div class="clear"></div>
                </div>
                <div class="task-01" style="margin-left: -61px;">
                    <div class="experience1-application">
                        <div class="form-textarea">
                            <div class="fl tit">经营范围 :</div>
                            <div class="fl textarea-box"><textarea class="textarea" style="resize: none;"></textarea></div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </div>
                <div class="form-text">
                    <div class="fl tit"><span></span>固定电话:</div>
                    <div class="fl text-box"><input type="text" class="input-text" style="width: 55px;"><span>&nbsp;-&nbsp;</span></div>
                    <div class="fl text-box"><input type="text" class="input-text" style="width: 100px;"><span>&nbsp;-&nbsp;</span></div>
                    <div class="fl text-box"><input type="text" class="input-text"></div>
                    <div class="clear"></div>
                </div>
                <div class="form-text">
                    <div class="fl tit"><span></span>手机:</div>
                    <div class="fl text-box"><input type="text" class="input-text" placeholder="请输入手机号码"></div>
                    <div class="fl tit"><span></span>邮箱:</div>
                    <div class="fl text-box"><input type="text" class="input-text" placeholder="请输入邮箱"></div>
                    <div class="clear"></div>
                </div>
                <div class="form-secelt address">
                    <div class="fl tit"><span></span>联系地址:</div>
                    <select class="fl secelt-box">
                        <option>中国</option>
                        <option>美国</option>
                        <option>澳大利亚</option>
                    </select>
                    <select class="fl secelt-box">
                        <option>北京市</option>
                        <option>河南省</option>
                        <option>上海市</option>
                    </select>
                    <select class="fl secelt-box">
                        <option>海淀区</option>
                        <option>郑州</option>
                        <option>南阳</option>
                    </select>
                    <div class="clear"></div>
                    <div class="form-text">
                        <div class="fl tit">&nbsp;</div>
                        <div class="fl text-box"><input type="text" placeholder="请输入详细地址" class="input-text"></div>
                        <div class="clear"></div>
                    </div>
                </div>
            </div>
            <div class="button-next" style="margin-left:350px;">
                <a href="javascript:;" class="next">下一步</a>
            </div>
        </div>
        <!--第一步:秒填基本信息 结束-->

        <!--第二步:配置平台区块 开始-->
        <div class="pay-step1" style="display: none;">
            <div class="form-check">
                <div class="fl tit">选择操作终端:</div>
                <div class="fl check-box">
                    <div>
                        <span class="check-curr">PC Web端</span>
                        <span class="check">PC客户端</span>
                        <span class="check">移动端</span>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="form-check">
                <div class="fl tit">选择展示区块:</div>
                <div class="fl check-box">
                    <div>
                        <span class="check-curr">导航栏目</span>
                        <span class="check">Banner区</span>
                        <span class="check">平台区块</span>
                        <span class="check-curr">产品区块</span>
                        <span class="check">应用区块</span>
                        <span class="check-curr">方案区块</span>
                    </div>
                    <div>
                        <span class="check">信息区块</span>
                        <span class="check">用户区块</span>
                        <span class="check">行情区块</span>
                        <span class="check">指标区块</span>
                        <span class="check">培训区块</span>
                        <span class="check">图书区块</span>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="form-check">
                <div class="fl tit">选择平台类型:</div>
                <div class="fl check-box">
                    <div>
                        <span class="check-curr">商圈平台</span>
                        <span class="check">商城平台</span>
                        <span class="check">量子对冲</span>
                        <span class="check">智慧法律</span>
                        <span class="check">智付平台</span>
                        <span class="check">运营维护</span>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="form-check">
                <div class="fl tit">选择智能应用:</div>
                <div class="fl check-box" flag="toolsBox">
                    <div>
                        <span class="check-curr" title="人事管理系统" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">人事管理系统</span> <span class="check" title="在线谈判" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">在线谈判</span> <span class="check" title="需求发布系统" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">需求发布系统</span> <span class="check-curr" title="订单管理系统" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">订单管理系统</span> <span class="check" title="项目文件管理" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">项目文件管理</span>
                    </div>
                    <div>
                        <span class="check-curr" title="合同管理系统" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">合同管理系统</span> <span class="check" title="全过程造价咨询管理系统" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">全过程造价咨询管理系统</span> <span class="check" title="工程材料管理系统" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">工程材料管理系统</span> <span class="check" title="在线会议" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">在线会议</span>
                    </div>
                    <div>
                        <span class="check" title="云桌面" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">云桌面</span> <span class="check" title="云存储" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">云存储</span> <span class="check" title="算量软件" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">算量软件</span> <span class="check" title="计价软件" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">计价软件</span> <span class="check" title="造价管理系统" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">造价管理系统</span> <span class="check" title="BIM" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">BIM</span>
                    </div>
                    <div>
                        <span class="check" title="Auto CAD" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">Auto CAD</span>
                        <span class="check" title="智付应用" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">智付应用</span>
                        <span class="check" title="任务管理系统" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">任务管理系统</span>
                        <span class="check" title="电子文件管理系统" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">电子文件管理系统</span>
                        <span class="check" title="流程管理系统" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">流程管理系统</span>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="button-next" style="margin-left:260px;">
                <a href="javascript:;" style="background:#ffb366;;" class="before">上一步</a>
                <a href="javascript:;" class="next">下一步</a>
            </div>
        </div>
        <!--第二步:配置平台区块 结束-->

        <!--第三步:加载平台资源 开始-->
        <div class="pay-step1" style="display: none;">
            <div class="iframemain-box" style="margin-left: 50px">
                <div class="form-radio">
                    <div class="fl tit">选择资源类型:</div>
                    <div class="fl radio-box">
                        <div>
                            <span class="radio">服务</span>
                            <span class="radio">方案</span>
                            <span class="radio-curr">企业信息</span>
                            <span class="radio">动态新闻</span>
                            <span class="radio">项目</span>
                            <span class="radio">图书</span>
                            <span class="radio">产品</span>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="form-radio-new" style="padding-top:20px;">
                    <div class="fl tit" style="color:#666;">导入数据:</div>
                    <div class="fl radio-box-new">
                        <div class="radio-info">
                            <div class="upload-area">
                                <div style="width: 300px;">
                                    <div class="upload-box"><input type="text" class="input-text" readonly="" placeholder=""></div>
                                    <div class="upload-btn" style="position:relative;">
                                        <a href="javascript:;" style="position:absolute; top:0; left:0;">点击上传</a>
                                        <input type="file" style="position:absolute; top:0; left:0; width:80px; height:26px; opacity:0; filter:alpha(opacity=0);">
                                    </div>
                                    <div class="clear"></div>
                                </div>
                                <div style="line-height:20px;color:#999;margin-top:5px;">支持Excel、CSV格式导入数据</div>
                            </div>
                            <div class="clear"></div>
                        </div>

                    </div>
                    <div class="clear"></div>
                </div>
                <div class="button-next" style="margin-left:260px;">
                    <a href="javascript:;" style="background:#ffb366;;" class="before">上一步</a>
                    <a href="javascript:;" class="next">下一步</a>
                </div>
            </div>
        </div>
        <!--第三步:加载平台资源 结束-->

        <!--第四步:引流激活 开始-->
        <div class="pay-step1" style="display: none;">
            <div class="form-check">
                <div class="fl tit">引流方式:</div>
                <div class="fl check-box" flag="toolsBox">
                    <div>
                        <span class="check-curr" title="风暴矩阵" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">风暴矩阵</span>
                        <span class="check" title="云课堂" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">云课堂</span>
                        <span class="check" title="圈媒体" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">圈媒体</span>
                        <span class="check" title="公告" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">公告</span>
                        <span class="check" title="专家培训" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">专家培训</span>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="form-check">
                <div class="fl tit">激活平台:</div>
                <div class="fl check-box" flag="toolsBox">
                    <div>
                        <span class="check-curr" title="会员入驻" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">会员入驻</span>
                        <span class="check" title="在线交流" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">在线交流</span>
                        <span class="check" title="创建商圈" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">创建商圈</span>
                        <span class="check-curr" title="策划营销" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">策划营销</span>
                        <span class="check" title="分享信息" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">分享信息</span>
                        <span class="check" title="资源共享" imgurl="http://cir.cmeplaza.com/cme-businessarea-app/resources/images/default/new_application1.png" linkurl="javascript:;">资源共享</span>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="button-next" style="margin-left:260px;">
                <a href="javascript:;" style="background:#ffb366;;" class="before">上一步</a>
                <a href="javascript:;" class="next">下一步</a>
            </div>
        </div>
        <!--第四步:引流激活 结束-->

        <!--第五步:转让/使用 开始-->
        <div class="risk-experience1-step3" style="display: none; margin-top: 53px; margin-left: -100px;">
            <div class="experience2-cecommend">
                <div class="form-check" style="margin-left:100px;">
                    <div class="fl tit">运营模式:</div>
                    <div class="fl check-box">
                        <span class="check demage">自主维护</span>
                        <span class="check-curr demage">委托维护</span>
                        <span class="check demage">合作维护</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="experience2-cecommend">
                <div class="form-check" style="margin-left:100px;">
                    <div class="fl tit">转让模式:</div>
                    <div class="fl check-box">
                        <span class="check demage">封装模板</span>
                        <span class="check-curr demage">研发平台商圈</span>
                        <span class="check demage">出租平台</span>
                        <span class="check-curr demage">营销推广</span>
                        <span class="check demage">出售平台</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="risk-experience1-step3-button" style="width: 283px; margin-left: 400px;">
                <a href="javascript:;" style="margin-right: 40px; background: #ffb759;" class="before" flag="prev">上一步</a>
                <a href="javascript:;" class="next_btn" do="last">进入应用经济平台</a>
            </div>
        </div>
        <!--第五步:转让/使用 结束-->
    </div>
</div>

<script type="text/javascript" src="jquery.min(1).js"></script>
<script type="text/javascript" src="domain.js"></script>
<script type="text/javascript" src="tools.js"></script>
<script type="text/javascript">
    $(function(){

        //切换
        $('.experience-main .tab-tit span[class!="arrow"]').each(function() {
            $(this).click(function() {
                var index = $(this).index() / 2;
                $(this).siblings("span").removeClass('curr');
                $(this).addClass('curr');
                $('.iframemain>div').hide();
                $('.iframemain>div').eq(index).show();
            });
        });
        //秒添基本信息
        //下一步
        $(".iframemain .pay-step1").eq(0).find(".button-next a").click(function(){
            $(".iframemain .pay-step1").eq(0).hide();
            $(".iframemain .pay-step1").eq(1).show();
            $(".experience-main .tab-tit > span").eq(2).addClass("curr").siblings("span").removeClass("curr");
        });

        //配置平台区块
        //下一步
        $(".iframemain .pay-step1").eq(1).find(".button-next .next").click(function(){
            $(".iframemain .pay-step1").eq(1).hide();
            $(".iframemain .pay-step1").eq(2).show();
            $(".experience-main .tab-tit > span").eq(4).addClass("curr").siblings("span").removeClass("curr");
        });
        //上一步
        $(".iframemain .pay-step1").eq(1).find(".button-next .before").click(function(){
            $(".iframemain .pay-step1").eq(1).hide();
            $(".iframemain .pay-step1").eq(0).show();
            $(".experience-main .tab-tit > span").eq(0).addClass("curr").siblings("span").removeClass("curr");
        });

        //加载平台资源
        //下一步
        $(".iframemain .pay-step1").eq(2).find(".button-next .next").click(function(){
            $(".iframemain .pay-step1").eq(2).hide();
            $(".iframemain .pay-step1").eq(3).show();
            $(".experience-main .tab-tit > span").eq(6).addClass("curr").siblings("span").removeClass("curr");
        });
        //上一步
        $(".iframemain .pay-step1").eq(2).find(".button-next .before").click(function(){
            $(".iframemain .pay-step1").eq(2).hide();
            $(".iframemain .pay-step1").eq(1).show();
            $(".experience-main .tab-tit > span").eq(2).addClass("curr").siblings("span").removeClass("curr");
        });

        //引流激活
        //下一步
        $(".iframemain .pay-step1").eq(3).find(".button-next .next").click(function(){
            $(".iframemain .pay-step1").eq(3).hide();
            $(".risk-experience1-step3").show();
            $(".experience-main .tab-tit > span").eq(8).addClass("curr").siblings("span").removeClass("curr");
        });
        //上一步
        $(".iframemain .pay-step1").eq(3).find(".button-next .before").click(function(){
            $(".iframemain .pay-step1").eq(3).hide();
            $(".iframemain .pay-step1").eq(2).show();
            $(".experience-main .tab-tit > span").eq(4).addClass("curr").siblings("span").removeClass("curr");
        });


        //运营转让
        //下一步
        $(".iframemain .risk-experience1-step3").eq(0).find(".risk-experience1-step3-button .next_btn").click(function(){
            $('div[flag="toolsBox"]').applicationTools();
            eachTools();
        });
        //上一步
        $(".iframemain .risk-experience1-step3").eq(0).find(".risk-experience1-step3-button .before").click(function(){
            $(".risk-experience1-step3").hide();
            $(".iframemain .pay-step1").eq(3).show();
            $(".experience-main .tab-tit > span").eq(6).addClass("curr").siblings("span").removeClass("curr");
        });



        //下拉选择
        $(".secelt-box").click(function(e){
            e.preventDefault();
            e.stopPropagation();
            $(this).find(".secelt-option").show();
        });
        $(".secelt-option").find("a").click(function(e){
            e.preventDefault();
            e.stopPropagation();
            $(this).parents(".secelt-box").find("a.show").html($(this).html());
            $(this).parents(".secelt-option").hide();
        })
        $(".secelt-option").hover(function(){},function(){
            $(this).hide();
        })
        //复选框
        $(".check-box span").click(function(){
            if($(this).hasClass("check-curr")){
                $(this).removeClass("check-curr");
                $(this).addClass("check");
            }else{
                $(this).addClass("check-curr");
                $(this).removeClass("check");
            }
        })
        //单选按钮
        $(".radio-box span").click(function(){
            if($(this).hasClass("radio-curr")){
                $(this).removeClass("radio-curr");
                $(this).addClass("radio");
            }else{
                $(this).addClass("radio-curr");
                $(this).removeClass("radio");
                $(this).siblings().removeClass("radio-curr").addClass("radio");
            }
        })
        //上传文件
        $('input[type="file"]').change(function(){
            $(this).parents(".upload-btn").siblings(".upload-box").find("input").val($(this).val());
        })
    })
</script>
</body></html>



4.iframe测试.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<input id="m1" type="button" value="模拟1">
<input id="m2" type="button" value="模拟2">
<iframe id="mm" src="模拟.html" name="if01" frameborder="0" scrolling="auto" width="900" height="400" marginwidth="0" marginheight="0" frameborder="1" align="default">

</iframe>
<script>
    $("#m2").click(function(){
        $("#mm").attr("src","模拟2.html");
    })

    $("#m1").click(function(){
        $("#mm").attr("src","模拟.html");
    })
</script>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值