iframe 小试
来源：互联网 发布：hp m1216nfh扫描软件 编辑：程序博客网 时间：2024/06/11 18:13
1.引入jquery 方便使用工厂函数
iframe的
属性
new : HTML5 中的新属性。
- left
- right
- top
- middle
- bottom
不赞成使用。请使用样式代替。
规定如何根据周围的元素来对齐此框架。
frameborder- 1
- 0
- pixels
- %
- ""
- allow-forms
- allow-same-origin
- allow-scripts
- allow-top-navigation
- yes
- no
- auto
- pixels
- %
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> - </span></div> <div class="fl text-box"><input type="text" class="input-text" style="width: 100px;"><span> - </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"> </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> - </span></div> <div class="fl text-box"><input type="text" class="input-text" style="width: 100px;"><span> - </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"> </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
- iframe 小试
- iframe 语法小全
- iFrame的小细节
- iframe submit小技巧
- iframe小例子
- js操作iframe小技巧
- JS小知识点二：iframe
- HTML IFRAME 用法小总结
- HTML iframe 用法小总结
- IFrame语法小全 --使用iframe内的函数
- iframe
- Iframe
- iframe
- iframe
- iframe
- IfRame
- iframe
- iframe
- nefu117 素数个数的位数(素数定理)
- 原型模式
- Yii文件上传
- 经典算法之七种排序
- 树状数组的建立
- iframe 小试
- Updates were rejected because the tip of your current branch is behind
- 关于ES的bulk操作的一些问题
- 数值计算——快速幂
- 《面试--动态规划》 ---五种经典的算法问题
- 简单选择排序
- 封装请求网络数据 显示XListView 加多条目展示
- HDU 6106 Classes
- jsp获取工程上下文路径
