<!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>

            &gt;

            <a href="#">帮助中心</a>

            &gt;

            <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();

        $(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{

    width:180px;

    float:left;

    margin-bottom: 50px;

}

#section .left .help-center{

    background: #;

    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;

    width:980px;

    background:#fafafa;

    border:1px solid #e6e6e6;

    margin-bottom:100px;

}

效果

jq使用自定义属性实现有title的tab切换的更多相关文章

  1. 可重复使用Tab切换代码和纯js代码

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. TAB切换与内容伸展闭合的结合

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. js或者jq的tab切换

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  4. [从今天开始修炼数据结构]线性表及其实现以及实现有Itertor的ArrayList和LinkedList

    一.线性表 1,什么是线性表 线性表就是零个或多个数据元素的有限序列.线性表中的每个元素只能有零个或一个前驱元素,零个或一个后继元素.在较复杂的线性表中,一个数据元素可以由若干个数据项组成.比如牵手排 ...

  5. jq 折面板+tab切换（自己封装的插件哦！！）

    如上图所示的一个折面板效果+tab切换:最重要的js代码如下: 对于布局简单介绍下: hot_wrap_li 这个是带箭头的横条: Arrow 这个是箭头的div:hot_wrap_li_wrap 这 ...

  6. jquery实现tab切换完整代码

    代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  7. tab切换的效果——仿照今日头条APP的切换效果

    说点废话;不知道是哪一版本起头条的tab切换效果就变了,一直琢磨着这个事,去度娘那里也没有什么结果:正好这两天有空就尝试做了一下:用前端的技术来实现: 先看效果吧:上面的tab随着slide滑动,上面 ...

  8. 几个不同的tab切换示例

    上一篇<论tab切换的几种实现方法>中讲了tab切换的4种不同实现原理,那么,现在到理论联系实际的时候了,下面就写几个实例. 一.仿”中国人民大学“官网的tab切换,背景是图片,效果图如下 ...

  9. Flutter AppBar 自定义顶部导航按钮 图标、颜色 以及 TabBar 定义顶部 Tab 切换

    Flutter AppBar 自定义顶部按钮图 标.颜色 属性 描述 leading 在标题前面显示的一个控件,在首页通常显示应用 的 logo;在其他界面通常显示为返回按钮 title 标题,通常显 ...

随机推荐

  1. css整站规划

    准备1 css reset /** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http:/ ...

  2. 深入一点 让细节帮你和Fragment更熟络

    有一段时间没有写博客了.作为2017年的第一篇,初衷起始于前段时间一个接触安卓开发还不算太长时间的朋友聊到的一个问题: "假设,想要对一个Fragment每次在隐藏/显示之间做状态切换时进行 ...

  3. 【数据压缩】LZW算法原理与源代码解析

    转载请注明出处:http://blog.csdn.net/luoshixian099/article/details/50331883 <勿在浮沙筑高台> LZW压缩算法原理很easy,因 ...

  4. CAS中的ABA问题

    http://coolshell.cn/articles/8239.html CAS的ABA问题 所谓ABA(见维基百科的ABA词条),问题基本是这个样子: 进程P1在共享变量中读到值为A P1被抢占 ...

  5. es6- ArrayBuffer

    ArrayBuffer对象.TypedArray视图和DataView视图是 JavaScript 操作二进制数据的一个接口. 简单说: ArrayBuffer对象代表原始的二进制数据, TypedA ...

  6. js 给json添加新的字段，或者添加一组数据，在JS数组指定位置删除、插入、替换元素

    JS定义了一个json数据var test={name:"name",age:"12"};需要给test再添加一个字段,需要什么办法,可以让test的值为{na ...

  7. JVM是怎么工作的？

    了解JVM的工作机制能够更好的帮助我们理解java语言本身,规避各种可能的错误.所以,今天趁此机会好好复习一下.来看看JVM是怎么工作的. 一.啥是JVM JVM可以理解为用来运行java程序的一种运 ...

  8. android 使用AChartEngine 饼图的实现

    1.AChartEngine 简介 AChartEngine是为Android应用而设计的绘图工具库.可用于绘制多种图表,我使用的是achartengine-1.1.0.jar.ChartEngine ...

  9. activeMQ Jms Demo

    概述 ActiveMQ 是Apache出品,最流行的,能力强劲的开源消息总线.ActiveMQ 是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provider实现,尽管JMS规范出台已经 ...

  10. Cookie的介绍

    Cookie是某些站点为了辨别用户身份而存在用户本地终端上的数据.Cookie总是保存在client中,可分为内存 Cookie和硬盘Cookie,而依照时间划分.又能够分为非持久Cookie和持久C ...