<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>帮助中心</title> <link type="text/css" rel="stylesheet" href="../css/reset.css"> <link type="text/css" rel="stylesheet" href="../css/helpCenter.css"> <script src="../js/vendor/jquery-1.9.1.min.js"></script> </head> <body> <section id="section"> <div class="k1200"> <div class="help-center-crumbs"> <a href="../index.html">首页</a> > <a href="#">帮助中心</a> > <a href="#" class="curr1">新手上路</a> </div> <!-- leftStart --> <div class="left"> <div class="help-center">帮助中心</div> <ul class="ul-one"> <li> <div class="title-list"> <span>新手上路</span> <i class="icon iconfont icon-kechenglunbor dpn"></i> <i class="icon iconfont icon-xiajiantou1"></i> </div> <ul class="ul-two"> <li class="con-list active" data-value="register">注册流程</li> <li class="con-list" data-value="buy">购买流程</li> <li class="con-list" data-value="user-agreement">用户协议</li> </ul> </li> <li> <div class="title-list"> <span>关于我们</span> <i class="icon iconfont icon-kechenglunbor"></i> <i class="icon iconfont icon-xiajiantou1 dpn"></i> </div> <ul class="ul-two dpn"> <li class="con-list" data-value="about-bwt">关于公司</li> <li class="con-list" data-value="contact-us">联系我们</li> </ul> </li> <li> <div class="title-list"> <span>物流</span> <i class="icon iconfont icon-kechenglunbor"></i> <i class="icon iconfont icon-xiajiantou1 dpn"></i> </div> <ul class="ul-two dpn"> <li class="con-list" data-value="send-way">配送方式说明</li> <li class="con-list" data-value="send-product">闪电发货</li> <li class="con-list" data-value="logistics">物流流程</li> </ul> </li> <li> <div class="title-list"> <span>服务</span> <i class="icon iconfont icon-kechenglunbor"></i> <i class="icon iconfont icon-xiajiantou1 dpn"></i> </div> <ul class="ul-two dpn"> <li class="con-list" data-value="trade">交易保障</li> <li class="con-list" data-value="return-product">7天无理由退货</li> <li class="con-list" data-value="pay-way">支付方式</li> <li class="con-list" data-value="custom-made">量身定制</li> </ul> </li> </ul> </div> <!-- leftEnd --> <!-- rightStart --> <div class="right"> <!-- 注册流程 --> <div class="register-box" data-value="register">注册流程</div> <!-- 购买流程 --> <div class="buy-box" data-value="buy">购买流程</div> <!-- 用户协议 --> <div class="user-agreement-box" data-value="user-agreement">用户协议</div> <!-- 关于公司 --> <div class="bwt-box" data-value="about-bwt">关于公司</div> <!-- 联系我们 --> <div class="contact-box" data-value="contact-us">联系我们</div> <!-- 配送方式说明 --> <div class="send-way-box" data-value="send-way">配送方式说明</div> <!-- 闪电发货 --> <div class="send-product-box" data-value="send-product">闪电发货</div> <!-- 物流流程 --> <div class="logistics-box" data-value="logistics">物流流程</div> <!-- 交易保障 --> <div class="trade-box" data-value="trade">交易保障</div> <!-- 7天无理由退货 --> <div class="return-box" data-value="return-product">7天无理由退货</div> <!-- 支付方式 --> <div class="pay-way-box" data-value="pay-way">支付方式</div> <!-- 量身定制 --> <div class="custom-made-box" data-value="custom-made">量身定制</div> </div> <!-- rightEnd --> </div> </section> </body> <script> $(function(){ // 左边导航点击展开效果 $(".title-list").click(function(){ $(this).next('.ul-two').toggle(200); $(this).children('i').toggle(); // 面包屑导航改变 var $currTest = $(this).find("span").html(); $(".help-center-crumbs .curr1").html($currTest); }); $(".right .register-box").show(); $(".right .register-box").siblings().hide(); // 左边导航点击当前样式及与右侧tab联动效果 $(".ul-two").click(function(e){ var $target = $(e.target); if($target.is('li')){ var $currTest = $target.parent().parent().find("span").html(); $(".help-center-crumbs .curr1").html($currTest); $target.css({"color":"#f00215"}); $target.siblings().css({"color":"#1a1a1a"}); $target.parent().parent().siblings().find('li').css({"color":"#1a1a1a"}); // attr如果该属性存在，则返回属性的值，否则为undefined var $currAttr = $target.attr("data-value"); var $rightDiv = $(".right").find('div'); $rightDiv.each(function(idx,el){ var $rightAttr = $rightDiv.eq(idx).attr("data-value"); if($currAttr===$rightAttr){ $(this).attr("data-value",$currAttr).show(); $(this).siblings().hide(); } }); } }); }); </script> </html>
helpCenter.css
.dpn{ display: none; } .active{ color:#f00215; } #section .help-center-crumbs{ height:50px; line-height:50px; color:#1a1a1a; font-size:12px; } #section .left{ 180px; float:left; margin-bottom: 50px; } #section .left .help-center{ background: #222; padding:14px 20px; color:#fff; font-size:16px; } #section .ul-one{ background:#fff; } #section .ul-one .title-list{ color:#1a1a1a; background:#f0f0f0; padding:14px 20px; font-size:14px; border-bottom: 1px solid #fff; } #section .ul-one .title-list:hover{ background: #dbdbdb; } #section .ul-one .title-list>i{ float:right; font-size:16px; line-height:25px; } #section .ul-one .ul-two{ background:#fff; } #section .ul-one .ul-two li{ padding:14px 20px; font-size:12px; } #section .right{ float:left; margin-left:40px; 980px; background:#fafafa; border:1px solid #e6e6e6; margin-bottom:100px; }
效果
