<!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. #include &lt;NOIP2010 Junior&gt; 三国游戏 ——using namespace wxl;

    题目描述 小涵很喜欢电脑游戏,这些天他正在玩一个叫做<三国>的游戏. 在游戏中,小涵和计算机各执一方,组建各自的军队进行对战.游戏中共有 N 位武将(N为偶数且不小于 4),任意两个武将之 ...

  2. SIGSEGV异常时打印函数调用链

    C语言写的程序跑飞了,怎样打印出函数调用链呢? linux_dev_framework软件包中的trace_exception_test.c就是一个实现演示样例. 该程序有益产生一个内存訪问异常,然后 ...

  3. Linux下读取RFID卡号(C串口编程)

    由于项目需要用到RFID.GPRS.摄像头等模块所以便看了一下,整理了一下学习思路,本篇先是整理一下串口读取RFID卡号的程序思路,后面还会更其他的 RFID模块: 本次采用的是125K的RFID读卡 ...

  4. 如何在Django1.6结合Python3.4版本中使用MySql

    唉,最近赶了个新潮,用起了Python3.4跟Django1.6,数据库依然是互联网企业常见的MySql. 悲催的是在Python2.7时代连接MySql的MySQLdb还不支持Python3.4,还 ...

  5. 根据WSDL文件生成代理类

    D:\Program Files\Microsoft Visual Studio 10.0\VC>wsdl  /l:c#  /n:cmsserver  /out:E:\ospsoft\Trave ...

  6. [AngularJS] Angular 1.3 ngAria - 2

    This is an highlight about ngAira in Angular Document abou ngAira Where can use ngAria? Currently, n ...

  7. Oracle Spatial 创建空间表、添加空间原表信息、添加删除空间索引

    一.创建空间表 创建一个空间表tbsvrc_buffer_t ,SQL如下: create table tbsvrc_buffer_t(  ID      VARCHAR2(50) not null, ...

  8. Android provider中使用sqlite内存数据库

    sqlite是支持内存数据库的,在Android中,我们可以通过provider实现内存数据库操作.内存数据库的优点,访问速度快,但在连接关闭后,数据库自动消失(在android中的表现是,provi ...

  9. 裸裸的线段树（hdu 1754）

    线段树的第一发. 哪天忘了还能够让自己找找回顾. 线段树操作: build  : 建树. update:点改动: query:查询 Input 在每一个測试的第一行,有两个正整数 N 和 M ( 0& ...

  10. java Socket通信使用BufferedReader和BufferedWriter的注意事项

    注意事项:readLine()要求有换行标识,write()要输出换行标识,要调用flush()刷新缓冲区. 以下是取自java socket通信中的一小段代码. BufferedReader rea ...