jq使用自定义属性实现有title的tab切换

"zh">

    "UTF-8">
    
    "text/css" rel="stylesheet" href="../css/reset.css">
    "text/css" rel="stylesheet" href="../css/helpCenter.css">
    


"section">
    
class="k1200">
        
class="help-center-crumbs">
             "../index.html">首页
            >
            "#">帮助中心
            >
            "#" class="curr1">新手上路
        
        
        
class="left">
            
class="help-center">帮助中心
            
class="ul-one">
                

                    
class="title-list">
                        新手上路
                        class="icon iconfont icon-kechenglunbor dpn">
                        class="icon iconfont icon-xiajiantou1">
                    
                    
class="ul-two">
                        
class="con-list active" data-value="register">注册流程
                        
class="con-list"  data-value="buy">购买流程
                        
class="con-list" data-value="user-agreement">用户协议
                    
                
                

                    
class="title-list">
                        关于我们
                        class="icon iconfont icon-kechenglunbor">
                        class="icon iconfont icon-xiajiantou1 dpn">
                    
                    
class="ul-two dpn">
                        
class="con-list" data-value="about-bwt">关于公司
                        
class="con-list" data-value="contact-us">联系我们
                    
                
                

                    
class="title-list">
                        物流
                        class="icon iconfont icon-kechenglunbor">
                        class="icon iconfont icon-xiajiantou1 dpn">
                    
                    
class="ul-two dpn">
                        
class="con-list" data-value="send-way">配送方式说明
                        
class="con-list" data-value="send-product">闪电发货
                        
class="con-list" data-value="logistics">物流流程
                    
                
                

                    
class="title-list">
                        服务
                        class="icon iconfont icon-kechenglunbor">
                        class="icon iconfont icon-xiajiantou1 dpn">
                    
                    
class="ul-two dpn">
                        
class="con-list" data-value="trade">交易保障
                        
class="con-list" data-value="return-product">7天无理由退货
                        
class="con-list" data-value="pay-way">支付方式
                        
class="con-list" data-value="custom-made">量身定制
                    
                
            
        
        
        
        
class="right">
            
            
class="register-box" data-value="register">注册流程
            
            
class="buy-box" data-value="buy">购买流程
            
            
class="user-agreement-box" data-value="user-agreement">用户协议
            
            
class="bwt-box" data-value="about-bwt">关于公司
            
            
class="contact-box" data-value="contact-us">联系我们
            
            
class="send-way-box" data-value="send-way">配送方式说明
            
            
class="send-product-box" data-value="send-product">闪电发货
            
            
class="logistics-box" data-value="logistics">物流流程
            
            
class="trade-box" data-value="trade">交易保障
            
            
class="return-box" data-value="return-product">7天无理由退货
            
            
class="pay-way-box" data-value="pay-way">支付方式
            
            
class="custom-made-box"  data-value="custom-made">量身定制
        
        
    

 

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: #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;
    width:980px;
    background:#fafafa;
    border:1px solid #e6e6e6;
    margin-bottom:100px;
}

效果