实现功能
- tab点击内容滚动
- tab手滑动内容滚动
- tab 手滑动内容滚动
- 根据请求的url参数定位到具体tab 下的具体的item
实现代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>帮助中心</title>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/touchslider.js"></script>
<style type="text/css">* { padding: 0; margin: 0; } .box { margin: 0px auto; width: 100%; height: auto; border: solid 1px #cccccc; } .Collapsing { width: 96%; padding: 2%; height: 30px; font-size: 18px; line-height: 30px; cursor: pointer; border-bottom: 1px solid #F2F2F2; text-align: left; background-position: center right no-repeat; background-color: white; color: #323232; line-height: 30px; } .coll_body { display: none; background-color: #F2F2F2; } .coll_body a { display: block; margin: 10px; text-align: center; background: #ebebeb; } .current { background-image: url(image/down.png); } body, td, th, ul, li { font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif; padding: 0; margin: 0; } a { color: #333; text-decoration: none; cursor: pointer; } .find_nav { width: 100%; height: 40px; background-color: #f9f9f9; position: fixed; top: 0; z-index: 9999; border-bottom: 1px solid #ddd; display: -moz-box; display: -webkit-box; display: box; } .find_nav_left { height: 40px; position: relative; overflow: hidden; -moz-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; } .find_nav_list { position: absolute; left: 0; } .find_nav_list ul { position: relative; white-space: nowrap; font-size: 0; } .find_nav_list ul li { display: inline-block; padding: 0; margin: 0 20px; } .find_nav_list ul li a { display: block; width: 100%; height: 100%; line-height: 40px; font-size: 15px; text-align: center; color: #989898; } .find_nav_cur a { color: #353535 !important; } .find_nav_list a.active { color: #353535; } .sideline { display: block; position: absolute; border: 0; height: 2px; background-color: #FFBC37; left: 0; top: 38px; pointer-events: none; } .li_list { overflow-y: auto; display: table; } .li_list->span { display: block; overflow: hidden; background: rgba(255, 255, 255, .2); color: #fff; margin: 0 0 20px; font-size: 55px; text-align: center } .swipe { padding: 40px 0 0 0; position: fixed; } .span_css { height: 5.8667vmin; width: 5.8667vmin; border-radius: 2.934vmin; background-color: #FFBC37; float: left; line-height: 5.8667vmin; text-align: center; margin-right: 2vmin; } .help-question { color: #18191a; font-size: 4.2667vmin; line-height: 5.8667vmin; margin-bottom: 2.1333vmin; font-weight: 500; content: 'viewport-units-buggyfill; font-size: 4.2667vmin; line-height: 5.8667vmin; margin-bottom: 2.1333vmin'; } .help-answer div { font-size: 3.7333vmin; line-height: 5.3333vmin; color: #7A7C80; margin-left: 7.8667vmin; content: 'viewport-units-buggyfill; font-size: 3.7333vmin; line-height: 5.3333vmin'; }</style></head>
<body>
<div class="find_nav">
<div class="find_nav_left">
<div class="find_nav_list">
<ul id="pagenavi">
<li>
<a href="#">租赁相关</a></li>
<li>
<a href="#">任务相关</a></li>
<li>
<a href="#">回收相关</a></li>
<li>
<a href="#">拍卖相关</a></li>
<li>
<a href="#" class="active">邀请相关</a></li>
<li class="sideline"></li>
</ul>
</div>
</div>
</div>
<div id="slider" class="swipe">
<ul class="box01_list">
<li class="li_list">
<div class="box" id="one">
<div class="Collapsing">关于租赁流程
<img alt="" src="image/up.png" style="float: right; width: 20px; height: 10px; margin-top: 10px;"></div>
<div class="coll_body">
<div style="height: 15vmin; padding: 10px 20px; text-align: center;">
<img alt="" src="image/rentprod.png" style="width: 100%; height: 100%;"></div>
<div style="height: 2vmin; background-color: #ECECEC"></div>
<div style="margin-top: 20px; margin-left: 10px; margin-right: 10px;">
<div>
<div style="padding-bottom:10px;">
<div class="help-question">
<span class="span_css">1</span>挑选商品，选择属性</div>
<div class="help-answer">
<div>挑选喜欢的商品并选择相应属性。趣租提供多种租赁模式可供选择。</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">2</span>实名认证+信用认证</div>
<div class="help-answer">
<div>所有模式都需进行实名认证，针对分期租及免押金模式，需要进行信用审核，审核通过后即可租赁</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">3</span>支付租金</div>
<div class="help-answer">
<div>对于全押金及免押金模式，每月交租日系统自动从冻结资金中扣除租金。</div>
<div>对于分期租模式，趣租现支持支付宝免密支付方式支付月租金</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">4</span>租期结束</div>
<div class="help-answer">
<div>续租：提交续租申请，继续使用商品。</div>
<div>退租：支持邮寄归还商品</div></div>
</div>
</div>
</div>
</div>
<div class="Collapsing">关于维修
<img alt="" src="image/down.png" style="float: right; width: 20px; height: 10px; margin-top: 10px;"></div>
<div class="coll_body">
<div style="height: 15vmin; padding: 10px 20px; text-align: center;">
<img alt="" src="image/rentprod.png" style="width: 100%; height: 100%;"></div>
<div style="height: 2vmin; background-color: #ECECEC"></div>
<div style="margin-top: 20px; margin-left: 10px; margin-right: 10px;">
<div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">1</span>挑选商品，选择属性</div>
<div class="help-answer">
<div>挑选喜欢的商品并选择相应属性。趣租提供多种租赁模式可供选择。</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">2</span>实名认证+信用认证</div>
<div class="help-answer">
<div>所有模式都需进行实名认证，针对分期租及免押金模式，需要进行信用审核，审核通过后即可租赁</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">3</span>支付租金</div>
<div class="help-answer">
<div>对于全押金及免押金模式，每月交租日系统自动从冻结资金中扣除租金。</div>
<div>对于分期租模式，趣租现支持支付宝免密支付方式支付月租金</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">4</span>租期结束</div>
<div class="help-answer">
<div>续租：提交续租申请，继续使用商品。</div>
<div>退租：支持邮寄归还商品</div></div>
</div>
</div>
</div>
</div>
<div class="Collapsing">关于续租
<img alt="" src="image/down.png" style="float: right; width: 20px; height: 10px; margin-top: 10px;"></div>
<div class="coll_body">
<div style="height: 15vmin; padding: 10px 20px; text-align: center;">
<img alt="" src="image/rentprod.png" style="width: 100%; height: 100%;"></div>
<div style="height: 2vmin; background-color: #ECECEC"></div>
<div style="margin-top: 20px; margin-left: 10px; margin-right: 10px;">
<div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">1</span>挑选商品，选择属性</div>
<div class="help-answer">
<div>挑选喜欢的商品并选择相应属性。趣租提供多种租赁模式可供选择。</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">2</span>实名认证+信用认证</div>
<div class="help-answer">
<div>所有模式都需进行实名认证，针对分期租及免押金模式，需要进行信用审核，审核通过后即可租赁</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">3</span>支付租金</div>
<div class="help-answer">
<div>对于全押金及免押金模式，每月交租日系统自动从冻结资金中扣除租金。</div>
<div>对于分期租模式，趣租现支持支付宝免密支付方式支付月租金</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">4</span>租期结束</div>
<div class="help-answer">
<div>续租：提交续租申请，继续使用商品。</div>
<div>退租：支持邮寄归还商品</div></div>
</div>
</div>
</div>
</div>
<div class="Collapsing">关于退租
<img alt="" src="image/down.png" style="float: right; width: 20px; height: 10px; margin-top: 10px;"></div>
<div class="coll_body">
<div style="height: 15vmin; padding: 10px 20px; text-align: center;">
<img alt="" src="image/rentprod.png" style="width: 100%; height: 100%;"></div>
<div style="height: 2vmin; background-color: #ECECEC"></div>
<div style="margin-top: 20px; margin-left: 10px; margin-right: 10px;">
<div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">Q</span>挑选商品，选择属性</div>
<div class="help-answer">
<div>挑选喜欢的商品并选择相应属性。趣租提供多种租赁模式可供选择。</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">Q</span>实名认证+信用认证</div>
<div class="help-answer">
<div>所有模式都需进行实名认证，针对分期租及免押金模式，需要进行信用审核，审核通过后即可租赁</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">Q</span>支付租金</div>
<div class="help-answer">
<div>对于全押金及免押金模式，每月交租日系统自动从冻结资金中扣除租金。</div>
<div>对于分期租模式，趣租现支持支付宝免密支付方式支付月租金</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">Q</span>租期结束</div>
<div class="help-answer">
<div>续租：提交续租申请，继续使用商品。</div>
<div>退租：支持邮寄归还商品</div></div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="li_list">
<div class="box" id="two">
<div class="Collapsing">关于租赁流程
<img alt="" src="image/up.png" style="float: right; width: 20px; height: 10px; margin-top: 10px;"></div>
<div class="coll_body">
<div style="height: 15vmin; padding: 10px 20px; text-align: center;">
<img alt="" src="image/rentprod.png" style="width: 100%; height: 100%;"></div>
<div style="height: 2vmin; background-color: #ECECEC"></div>
<div style="margin-top: 20px; margin-left: 10px; margin-right: 10px;">
<div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">1</span>挑选商品，选择属性</div>
<div class="help-answer">
<div>挑选喜欢的商品并选择相应属性。趣租提供多种租赁模式可供选择。</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">2</span>实名认证+信用认证</div>
<div class="help-answer">
<div>所有模式都需进行实名认证，针对分期租及免押金模式，需要进行信用审核，审核通过后即可租赁</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">3</span>支付租金</div>
<div class="help-answer">
<div>对于全押金及免押金模式，每月交租日系统自动从冻结资金中扣除租金。</div>
<div>对于分期租模式，趣租现支持支付宝免密支付方式支付月租金</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">4</span>租期结束</div>
<div class="help-answer">
<div>续租：提交续租申请，继续使用商品。</div>
<div>退租：支持邮寄归还商品</div></div>
</div>
</div>
</div>
</div>
<div class="Collapsing">关于维修
<img alt="" src="image/down.png" style="float: right; width: 20px; height: 10px; margin-top: 10px;"></div>
<div class="coll_body">
<div style="height: 15vmin; padding: 10px 20px; text-align: center;">
<img alt="" src="image/rentprod.png" style="width: 100%; height: 100%;"></div>
<div style="height: 2vmin; background-color: #ECECEC"></div>
<div style="margin-top: 20px; margin-left: 10px; margin-right: 10px;">
<div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">1</span>挑选商品，选择属性</div>
<div class="help-answer">
<div>挑选喜欢的商品并选择相应属性。趣租提供多种租赁模式可供选择。</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">2</span>实名认证+信用认证</div>
<div class="help-answer">
<div>所有模式都需进行实名认证，针对分期租及免押金模式，需要进行信用审核，审核通过后即可租赁</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">3</span>支付租金</div>
<div class="help-answer">
<div>对于全押金及免押金模式，每月交租日系统自动从冻结资金中扣除租金。</div>
<div>对于分期租模式，趣租现支持支付宝免密支付方式支付月租金</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">4</span>租期结束</div>
<div class="help-answer">
<div>续租：提交续租申请，继续使用商品。</div>
<div>退租：支持邮寄归还商品</div></div>
</div>
</div>
</div>
</div>
<div class="Collapsing">关于续租
<img alt="" src="image/down.png" style="float: right; width: 20px; height: 10px; margin-top: 10px;"></div>
<div class="coll_body">
<div style="height: 15vmin; padding: 10px 20px; text-align: center;">
<img alt="" src="image/rentprod.png" style="width: 100%; height: 100%;"></div>
<div style="height: 2vmin; background-color: #ECECEC"></div>
<div style="margin-top: 20px; margin-left: 10px; margin-right: 10px;">
<div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">1</span>挑选商品，选择属性</div>
<div class="help-answer">
<div>挑选喜欢的商品并选择相应属性。趣租提供多种租赁模式可供选择。</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">2</span>实名认证+信用认证</div>
<div class="help-answer">
<div>所有模式都需进行实名认证，针对分期租及免押金模式，需要进行信用审核，审核通过后即可租赁</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">3</span>支付租金</div>
<div class="help-answer">
<div>对于全押金及免押金模式，每月交租日系统自动从冻结资金中扣除租金。</div>
<div>对于分期租模式，趣租现支持支付宝免密支付方式支付月租金</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">4</span>租期结束</div>
<div class="help-answer">
<div>续租：提交续租申请，继续使用商品。</div>
<div>退租：支持邮寄归还商品</div></div>
</div>
</div>
</div>
</div>
<div class="Collapsing">关于退租
<img alt="" src="image/down.png" style="float: right; width: 20px; height: 10px; margin-top: 10px;"></div>
<div class="coll_body">
<div style="height: 15vmin; padding: 10px 20px; text-align: center;">
<img alt="" src="image/rentprod.png" style="width: 100%; height: 100%;"></div>
<div style="height: 2vmin; background-color: #ECECEC"></div>
<div style="margin-top: 20px; margin-left: 10px; margin-right: 10px;">
<div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">Q</span>挑选商品，选择属性</div>
<div class="help-answer">
<div>挑选喜欢的商品并选择相应属性。趣租提供多种租赁模式可供选择。</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">Q</span>实名认证+信用认证</div>
<div class="help-answer">
<div>所有模式都需进行实名认证，针对分期租及免押金模式，需要进行信用审核，审核通过后即可租赁</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">Q</span>支付租金</div>
<div class="help-answer">
<div>对于全押金及免押金模式，每月交租日系统自动从冻结资金中扣除租金。</div>
<div>对于分期租模式，趣租现支持支付宝免密支付方式支付月租金</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">Q</span>租期结束</div>
<div class="help-answer">
<div>续租：提交续租申请，继续使用商品。</div>
<div>退租：支持邮寄归还商品</div></div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="li_list">
<div class="box" id="three">
<div class="Collapsing">关于租赁流程
<img alt="" src="image/up.png" style="float: right; width: 20px; height: 10px; margin-top: 10px;"></div>
<div class="coll_body">
<div style="height: 15vmin; padding: 10px 20px; text-align: center;">
<img alt="" src="image/rentprod.png" style="width: 100%; height: 100%;"></div>
<div style="height: 2vmin; background-color: #ECECEC"></div>
<div style="margin-top: 20px; margin-left: 10px; margin-right: 10px;">
<div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">1</span>挑选商品，选择属性</div>
<div class="help-answer">
<div>挑选喜欢的商品并选择相应属性。趣租提供多种租赁模式可供选择。</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">2</span>实名认证+信用认证</div>
<div class="help-answer">
<div>所有模式都需进行实名认证，针对分期租及免押金模式，需要进行信用审核，审核通过后即可租赁</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">3</span>支付租金</div>
<div class="help-answer">
<div>对于全押金及免押金模式，每月交租日系统自动从冻结资金中扣除租金。</div>
<div>对于分期租模式，趣租现支持支付宝免密支付方式支付月租金</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">4</span>租期结束</div>
<div class="help-answer">
<div>续租：提交续租申请，继续使用商品。</div>
<div>退租：支持邮寄归还商品</div></div>
</div>
</div>
</div>
</div>
<div class="Collapsing">关于维修
<img alt="" src="image/down.png" style="float: right; width: 20px; height: 10px; margin-top: 10px;"></div>
<div class="coll_body">
<div style="height: 15vmin; padding: 10px 20px; text-align: center;">
<img alt="" src="image/rentprod.png" style="width: 100%; height: 100%;"></div>
<div style="height: 2vmin; background-color: #ECECEC"></div>
<div style="margin-top: 20px; margin-left: 10px; margin-right: 10px;">
<div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">1</span>挑选商品，选择属性</div>
<div class="help-answer">
<div>挑选喜欢的商品并选择相应属性。趣租提供多种租赁模式可供选择。</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">2</span>实名认证+信用认证</div>
<div class="help-answer">
<div>所有模式都需进行实名认证，针对分期租及免押金模式，需要进行信用审核，审核通过后即可租赁</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">3</span>支付租金</div>
<div class="help-answer">
<div>对于全押金及免押金模式，每月交租日系统自动从冻结资金中扣除租金。</div>
<div>对于分期租模式，趣租现支持支付宝免密支付方式支付月租金</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">4</span>租期结束</div>
<div class="help-answer">
<div>续租：提交续租申请，继续使用商品。</div>
<div>退租：支持邮寄归还商品</div></div>
</div>
</div>
</div>
</div>
<div class="Collapsing">关于续租
<img alt="" src="image/down.png" style="float: right; width: 20px; height: 10px; margin-top: 10px;"></div>
<div class="coll_body">
<div style="height: 15vmin; padding: 10px 20px; text-align: center;">
<img alt="" src="image/rentprod.png" style="width: 100%; height: 100%;"></div>
<div style="height: 2vmin; background-color: #ECECEC"></div>
<div style="margin-top: 20px; margin-left: 10px; margin-right: 10px;">
<div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">1</span>挑选商品，选择属性</div>
<div class="help-answer">
<div>挑选喜欢的商品并选择相应属性。趣租提供多种租赁模式可供选择。</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">2</span>实名认证+信用认证</div>
<div class="help-answer">
<div>所有模式都需进行实名认证，针对分期租及免押金模式，需要进行信用审核，审核通过后即可租赁</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">3</span>支付租金</div>
<div class="help-answer">
<div>对于全押金及免押金模式，每月交租日系统自动从冻结资金中扣除租金。</div>
<div>对于分期租模式，趣租现支持支付宝免密支付方式支付月租金</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">4</span>租期结束</div>
<div class="help-answer">
<div>续租：提交续租申请，继续使用商品。</div>
<div>退租：支持邮寄归还商品</div></div>
</div>
</div>
</div>
</div>
<div class="Collapsing">关于退租
<img alt="" src="image/down.png" style="float: right; width: 20px; height: 10px; margin-top: 10px;"></div>
<div class="coll_body">
<div style="height: 15vmin; padding: 10px 20px; text-align: center;">
<img alt="" src="image/rentprod.png" style="width: 100%; height: 100%;"></div>
<div style="height: 2vmin; background-color: #ECECEC"></div>
<div style="margin-top: 20px; margin-left: 10px; margin-right: 10px;">
<div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">Q</span>挑选商品，选择属性</div>
<div class="help-answer">
<div>挑选喜欢的商品并选择相应属性。趣租提供多种租赁模式可供选择。</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">Q</span>实名认证+信用认证</div>
<div class="help-answer">
<div>所有模式都需进行实名认证，针对分期租及免押金模式，需要进行信用审核，审核通过后即可租赁</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">Q</span>支付租金</div>
<div class="help-answer">
<div>对于全押金及免押金模式，每月交租日系统自动从冻结资金中扣除租金。</div>
<div>对于分期租模式，趣租现支持支付宝免密支付方式支付月租金</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">Q</span>租期结束</div>
<div class="help-answer">
<div>续租：提交续租申请，继续使用商品。</div>
<div>退租：支持邮寄归还商品</div></div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="li_list">
<div class="box" id="four">
<div class="Collapsing">关于租赁流程
<img alt="" src="image/up.png" style="float: right; width: 20px; height: 10px; margin-top: 10px;"></div>
<div class="coll_body">
<div style="height: 15vmin; padding: 10px 20px; text-align: center;">
<img alt="" src="image/rentprod.png" style="width: 100%; height: 100%;"></div>
<div style="height: 2vmin; background-color: #ECECEC"></div>
<div style="margin-top: 20px; margin-left: 10px; margin-right: 10px;">
<div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">1</span>挑选商品，选择属性</div>
<div class="help-answer">
<div>挑选喜欢的商品并选择相应属性。趣租提供多种租赁模式可供选择。</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">2</span>实名认证+信用认证</div>
<div class="help-answer">
<div>所有模式都需进行实名认证，针对分期租及免押金模式，需要进行信用审核，审核通过后即可租赁</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">3</span>支付租金</div>
<div class="help-answer">
<div>对于全押金及免押金模式，每月交租日系统自动从冻结资金中扣除租金。</div>
<div>对于分期租模式，趣租现支持支付宝免密支付方式支付月租金</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">4</span>租期结束</div>
<div class="help-answer">
<div>续租：提交续租申请，继续使用商品。</div>
<div>退租：支持邮寄归还商品</div></div>
</div>
</div>
</div>
</div>
<div class="Collapsing">关于维修
<img alt="" src="image/down.png" style="float: right; width: 20px; height: 10px; margin-top: 10px;"></div>
<div class="coll_body">
<div style="height: 15vmin; padding: 10px 20px; text-align: center;">
<img alt="" src="image/rentprod.png" style="width: 100%; height: 100%;"></div>
<div style="height: 2vmin; background-color: #ECECEC"></div>
<div style="margin-top: 20px; margin-left: 10px; margin-right: 10px;">
<div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">1</span>挑选商品，选择属性</div>
<div class="help-answer">
<div>挑选喜欢的商品并选择相应属性。趣租提供多种租赁模式可供选择。</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">2</span>实名认证+信用认证</div>
<div class="help-answer">
<div>所有模式都需进行实名认证，针对分期租及免押金模式，需要进行信用审核，审核通过后即可租赁</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">3</span>支付租金</div>
<div class="help-answer">
<div>对于全押金及免押金模式，每月交租日系统自动从冻结资金中扣除租金。</div>
<div>对于分期租模式，趣租现支持支付宝免密支付方式支付月租金</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">4</span>租期结束</div>
<div class="help-answer">
<div>续租：提交续租申请，继续使用商品。</div>
<div>退租：支持邮寄归还商品</div></div>
</div>
</div>
</div>
</div>
<div class="Collapsing">关于续租
<img alt="" src="image/down.png" style="float: right; width: 20px; height: 10px; margin-top: 10px;"></div>
<div class="coll_body">
<div style="height: 15vmin; padding: 10px 20px; text-align: center;">
<img alt="" src="image/rentprod.png" style="width: 100%; height: 100%;"></div>
<div style="height: 2vmin; background-color: #ECECEC"></div>
<div style="margin-top: 20px; margin-left: 10px; margin-right: 10px;">
<div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">1</span>挑选商品，选择属性</div>
<div class="help-answer">
<div>挑选喜欢的商品并选择相应属性。趣租提供多种租赁模式可供选择。</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">2</span>实名认证+信用认证</div>
<div class="help-answer">
<div>所有模式都需进行实名认证，针对分期租及免押金模式，需要进行信用审核，审核通过后即可租赁</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">3</span>支付租金</div>
<div class="help-answer">
<div>对于全押金及免押金模式，每月交租日系统自动从冻结资金中扣除租金。</div>
<div>对于分期租模式，趣租现支持支付宝免密支付方式支付月租金</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">4</span>租期结束</div>
<div class="help-answer">
<div>续租：提交续租申请，继续使用商品。</div>
<div>退租：支持邮寄归还商品</div></div>
</div>
</div>
</div>
</div>
<div class="Collapsing">关于退租
<img alt="" src="image/down.png" style="float: right; width: 20px; height: 10px; margin-top: 10px;"></div>
<div class="coll_body">
<div style="height: 15vmin; padding: 10px 20px; text-align: center;">
<img alt="" src="image/rentprod.png" style="width: 100%; height: 100%;"></div>
<div style="height: 2vmin; background-color: #ECECEC"></div>
<div style="margin-top: 20px; margin-left: 10px; margin-right: 10px;">
<div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">Q</span>挑选商品，选择属性</div>
<div class="help-answer">
<div>挑选喜欢的商品并选择相应属性。趣租提供多种租赁模式可供选择。</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">Q</span>实名认证+信用认证</div>
<div class="help-answer">
<div>所有模式都需进行实名认证，针对分期租及免押金模式，需要进行信用审核，审核通过后即可租赁</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">Q</span>支付租金</div>
<div class="help-answer">
<div>对于全押金及免押金模式，每月交租日系统自动从冻结资金中扣除租金。</div>
<div>对于分期租模式，趣租现支持支付宝免密支付方式支付月租金</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">Q</span>租期结束</div>
<div class="help-answer">
<div>续租：提交续租申请，继续使用商品。</div>
<div>退租：支持邮寄归还商品</div></div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="li_list">
<div class="box" id="five">
<div class="Collapsing">关于租赁流程
<img alt="" src="image/up.png" style="float: right; width: 20px; height: 10px; margin-top: 10px;"></div>
<div class="coll_body">
<div style="height: 15vmin; padding: 10px 20px; text-align: center;">
<img alt="" src="image/rentprod.png" style="width: 100%; height: 100%;"></div>
<div style="height: 2vmin; background-color: #ECECEC"></div>
<div style="margin-top: 20px; margin-left: 10px; margin-right: 10px;">
<div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">1</span>挑选商品，选择属性</div>
<div class="help-answer">
<div>挑选喜欢的商品并选择相应属性。趣租提供多种租赁模式可供选择。</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">2</span>实名认证+信用认证</div>
<div class="help-answer">
<div>所有模式都需进行实名认证，针对分期租及免押金模式，需要进行信用审核，审核通过后即可租赁</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">3</span>支付租金</div>
<div class="help-answer">
<div>对于全押金及免押金模式，每月交租日系统自动从冻结资金中扣除租金。</div>
<div>对于分期租模式，趣租现支持支付宝免密支付方式支付月租金</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">4</span>租期结束</div>
<div class="help-answer">
<div>续租：提交续租申请，继续使用商品。</div>
<div>退租：支持邮寄归还商品</div></div>
</div>
</div>
</div>
</div>
<div class="Collapsing">关于维修
<img alt="" src="image/down.png" style="float: right; width: 20px; height: 10px; margin-top: 10px;"></div>
<div class="coll_body">
<div style="height: 15vmin; padding: 10px 20px; text-align: center;">
<img alt="" src="image/rentprod.png" style="width: 100%; height: 100%;"></div>
<div style="height: 2vmin; background-color: #ECECEC"></div>
<div style="margin-top: 20px; margin-left: 10px; margin-right: 10px;">
<div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">1</span>挑选商品，选择属性</div>
<div class="help-answer">
<div>挑选喜欢的商品并选择相应属性。趣租提供多种租赁模式可供选择。</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">2</span>实名认证+信用认证</div>
<div class="help-answer">
<div>所有模式都需进行实名认证，针对分期租及免押金模式，需要进行信用审核，审核通过后即可租赁</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">3</span>支付租金</div>
<div class="help-answer">
<div>对于全押金及免押金模式，每月交租日系统自动从冻结资金中扣除租金。</div>
<div>对于分期租模式，趣租现支持支付宝免密支付方式支付月租金</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">4</span>租期结束</div>
<div class="help-answer">
<div>续租：提交续租申请，继续使用商品。</div>
<div>退租：支持邮寄归还商品</div></div>
</div>
</div>
</div>
</div>
<div class="Collapsing">关于续租
<img alt="" src="image/down.png" style="float: right; width: 20px; height: 10px; margin-top: 10px;"></div>
<div class="coll_body">
<div style="height: 15vmin; padding: 10px 20px; text-align: center;">
<img alt="" src="image/rentprod.png" style="width: 100%; height: 100%;"></div>
<div style="height: 2vmin; background-color: #ECECEC"></div>
<div style="margin-top: 20px; margin-left: 10px; margin-right: 10px;">
<div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">1</span>挑选商品，选择属性</div>
<div class="help-answer">
<div>挑选喜欢的商品并选择相应属性。趣租提供多种租赁模式可供选择。</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">2</span>实名认证+信用认证</div>
<div class="help-answer">
<div>所有模式都需进行实名认证，针对分期租及免押金模式，需要进行信用审核，审核通过后即可租赁</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">3</span>支付租金</div>
<div class="help-answer">
<div>对于全押金及免押金模式，每月交租日系统自动从冻结资金中扣除租金。</div>
<div>对于分期租模式，趣租现支持支付宝免密支付方式支付月租金</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">4</span>租期结束</div>
<div class="help-answer">
<div>续租：提交续租申请，继续使用商品。</div>
<div>退租：支持邮寄归还商品</div></div>
</div>
</div>
</div>
</div>
<div class="Collapsing">关于退租
<img alt="" src="image/down.png" style="float: right; width: 20px; height: 10px; margin-top: 10px;"></div>
<div class="coll_body">
<div style="height: 15vmin; padding: 10px 20px; text-align: center;">
<img alt="" src="image/rentprod.png" style="width: 100%; height: 100%;"></div>
<div style="height: 2vmin; background-color: #ECECEC"></div>
<div style="margin-top: 20px; margin-left: 10px; margin-right: 10px;">
<div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">Q</span>挑选商品，选择属性</div>
<div class="help-answer">
<div>挑选喜欢的商品并选择相应属性。趣租提供多种租赁模式可供选择。</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">Q</span>实名认证+信用认证</div>
<div class="help-answer">
<div>所有模式都需进行实名认证，针对分期租及免押金模式，需要进行信用审核，审核通过后即可租赁</div></div>
</div>
<div style="padding-bottom: 10px;">
<div class="help-question">
<span class="span_css">Q</span>支付租金</div>
<div class="help-answer">
<div>对于全押金及免押金模式，每月交租日系统自动从冻结资金中扣除租金。</div>
<div>对于分期租模式，趣租现支持支付宝免密支付方式支付月租金</div></div>
</div>
<div style="padding-bottom: 10px">
<div class="help-question">
<span class="span_css">Q</span>租期结束</div>
<div class="help-answer">
<div>续租：提交续租申请，继续使用商品。</div>
<div>退租：支持邮寄归还商品</div></div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<script type="text/javascript">$(function() {
$("#one .coll_body").eq(1).show();
$("#one .Collapsing").click(function() {
$(this).next(".coll_body").slideToggle(500).siblings(".coll_body").slideUp(500);
if ($(this).children().eq(0).attr("src") == "image/down.png") {
$(this).children().eq(0).attr("src", "image/up.png");
$(this).siblings(".Collapsing").children().each(function() {
if ($(this).attr("src") == "image/up.png") {
$(this).attr("src", "image/down.png");
}
});
} else {
$(this).children().eq(0).attr("src", "image/down.png");
$(this).siblings(".Collapsing").children().each(function() {
$(this).attr("src", "image/down.png");
});
}
});
$("#two .coll_body").eq(0).show();
$("#two .Collapsing").click(function() {
$(this).next(".coll_body").slideToggle(500).siblings(".coll_body").slideUp(500);
if ($(this).children().eq(0).attr("src") == "image/down.png") {
$(this).children().eq(0).attr("src", "image/up.png");
$(this).siblings(".Collapsing").children().each(function() {
if ($(this).attr("src") == "image/up.png") {
$(this).attr("src", "image/down.png");
}
});
} else {
$(this).children().eq(0).attr("src", "image/down.png");
$(this).siblings(".Collapsing").children().each(function() {
$(this).attr("src", "image/down.png");
});
}
});
$("#three .coll_body").eq(0).show();
$("#three .Collapsing").click(function() {
$(this).next(".coll_body").slideToggle(500).siblings(".coll_body").slideUp(500);
if ($(this).children().eq(0).attr("src") == "image/down.png") {
$(this).children().eq(0).attr("src", "image/up.png");
$(this).siblings(".Collapsing").children().each(function() {
if ($(this).attr("src") == "image/up.png") {
$(this).attr("src", "image/down.png");
}
});
} else {
$(this).children().eq(0).attr("src", "image/down.png");
$(this).siblings(".Collapsing").children().each(function() {
$(this).attr("src", "image/down.png");
});
}
});
$("#four .coll_body").eq(0).show();
$("#four .Collapsing").click(function() {
$(this).next(".coll_body").slideToggle(500).siblings(".coll_body").slideUp(500);
if ($(this).children().eq(0).attr("src") == "image/down.png") {
$(this).children().eq(0).attr("src", "image/up.png");
$(this).siblings(".Collapsing").children().each(function() {
if ($(this).attr("src") == "image/up.png") {
$(this).attr("src", "image/down.png");
}
});
} else {
$(this).children().eq(0).attr("src", "image/down.png");
$(this).siblings(".Collapsing").children().each(function() {
$(this).attr("src", "image/down.png");
});
}
});
$("#five .coll_body").eq(num == null ? null: num).show();
$("#five .Collapsing").click(function() {
$(this).next(".coll_body").slideToggle(500).siblings(".coll_body").slideUp(500);
if ($(this).children().eq(0).attr("src") == "image/down.png") {
$(this).children().eq(0).attr("src", "image/up.png");
$(this).siblings(".Collapsing").children().each(function() {
if ($(this).attr("src") == "image/up.png") {
$(this).attr("src", "image/down.png");
}
});
} else {
$(this).children().eq(0).attr("src", "image/down.png");
$(this).siblings(".Collapsing").children().each(function() {
$(this).attr("src", "image/down.png");
});
}
});
});</script>
<script type="text/javascript">
var $window = $(window);
var initialWindowHeight = null;
$window.resize(function() {
sliderHeight();
});
sliderHeight();
function sliderHeight() {
var wHeight = $(window).height();
var sliderHeight = wHeight - 40;
$(".swipe li").height(sliderHeight);
}
$(".find_nav_list").css("left", 0);
$(".find_nav_list li").each(function() {
$(".sideline").css({
left: 0
});
$(".find_nav_list li").eq(0).addClass("find_nav_cur").siblings().removeClass("find_nav_cur");
});
var nav_w = $(".find_nav_list li").first().width();
$(".sideline").width(nav_w);
$(".find_nav_list li").on('click',
function() {
nav_w = $(this).width();
$(".sideline").stop(true);
$(".sideline").animate({
left: $(this).position().left
},
300);
$(".sideline").animate({
width: nav_w
});
$(this).addClass("find_nav_cur").siblings().removeClass("find_nav_cur");
var fn_w = ($(".find_nav").width() - nav_w) / 2;
var fnl_l;
var fnl_x = parseInt($(this).position().left);
if (fnl_x <= fn_w) {
fnl_l = 0;
} else if (fn_w - fnl_x <= flb_w - fl_w) {
fnl_l = flb_w - fl_w;
} else {
fnl_l = fn_w - fnl_x;
}
$(".find_nav_list").animate({
"left": fnl_l
},
300);
});
var fl_w = $(".find_nav_list").width();
var flb_w = $(".find_nav_left").width();
$(".find_nav_list").on('touchstart',
function(e) {
var touch1 = e.originalEvent.targetTouches[0];
x1 = touch1.pageX;
y1 = touch1.pageY;
ty_left = parseInt($(this).css("left"));
});
$(".find_nav_list").on('touchmove',
function(e) {
var touch2 = e.originalEvent.targetTouches[0];
var x2 = touch2.pageX;
var y2 = touch2.pageY;
if (ty_left + x2 - x1 >= 0) {
$(this).css("left", 0);
} else if (ty_left + x2 - x1 <= flb_w - fl_w) {
$(this).css("left", flb_w - fl_w);
} else {
$(this).css("left", ty_left + x2 - x1);
}
if (Math.abs(y2 - y1) > 0) {
e.preventDefault();
}
});
var page = 'pagenavi';
var mslide = 'slider';
var as = $("#pagenavi").find("a");
var tt = new TouchSlider({
id: mslide,
'auto': '-1',
fx: 'ease-out',
direction: 'left',
speed: 600,
timeout: 5000,
'before': function(index) {
var as = document.getElementById(this.page).getElementsByTagName('a');
as[this.p].className = '';
this.p = index;
fnl_x = parseInt($(".find_nav_list li").eq(this.p).position().left);
nav_w = $(".find_nav_list li").eq(this.p).width();
$(".sideline").stop(true);
$(".sideline").animate({
left: $(".find_nav_list li").eq(this.p).position().left
},
300);
$(".sideline").animate({
width: nav_w
},
100);
$(".find_nav_list li").eq(this.p).addClass("find_nav_cur").siblings().removeClass("find_nav_cur");
var fn_w = ($(".find_nav").width() - nav_w) / 2;
var fnl_l;
if (fnl_x <= fn_w) {
fnl_l = 0;
} else if (fn_w - fnl_x <= flb_w - fl_w) {
fnl_l = flb_w - fl_w;
} else {
fnl_l = fn_w - fnl_x;
}
$(".find_nav_list").animate({
"left": fnl_l
},
300);
}
});
tt.page = page;
tt.p = 0;
for (var i = 0; i < as.length; i++) { (function() {
var j = i;
as[j].tt = tt;
as[j].onclick = function() {
this.tt.slide(j);
return false;
}
})();
}</script>
<script type="text/javascript">
(function($) {
$.getUrlParam = function(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}
})(jQuery);
var tab = $.getUrlParam('tab');
var num = $.getUrlParam('num');
$(".find_nav_list li a").eq(tab).trigger("click");
</script>
</body>
</html>
扫一扫
1165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
