jq使用自定义属性实现有title的tab切换
<!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();
$(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切换的更多相关文章
- 可重复使用Tab切换代码和纯js代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- TAB切换与内容伸展闭合的结合
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js或者jq的tab切换
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- [从今天开始修炼数据结构]线性表及其实现以及实现有Itertor的ArrayList和LinkedList
一.线性表 1,什么是线性表 线性表就是零个或多个数据元素的有限序列.线性表中的每个元素只能有零个或一个前驱元素,零个或一个后继元素.在较复杂的线性表中,一个数据元素可以由若干个数据项组成.比如牵手排 ...
- jq 折面板+tab切换（自己封装的插件哦！！）
如上图所示的一个折面板效果+tab切换:最重要的js代码如下: 对于布局简单介绍下: hot_wrap_li 这个是带箭头的横条: Arrow 这个是箭头的div:hot_wrap_li_wrap 这 ...
- jquery实现tab切换完整代码
代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- tab切换的效果——仿照今日头条APP的切换效果
说点废话;不知道是哪一版本起头条的tab切换效果就变了,一直琢磨着这个事,去度娘那里也没有什么结果:正好这两天有空就尝试做了一下:用前端的技术来实现: 先看效果吧:上面的tab随着slide滑动,上面 ...
- 几个不同的tab切换示例
上一篇<论tab切换的几种实现方法>中讲了tab切换的4种不同实现原理,那么,现在到理论联系实际的时候了,下面就写几个实例. 一.仿”中国人民大学“官网的tab切换,背景是图片,效果图如下 ...
- Flutter AppBar 自定义顶部导航按钮 图标、颜色 以及 TabBar 定义顶部 Tab 切换
Flutter AppBar 自定义顶部按钮图 标.颜色 属性 描述 leading 在标题前面显示的一个控件,在首页通常显示应用 的 logo;在其他界面通常显示为返回按钮 title 标题,通常显 ...
随机推荐
- 1 cocos2dx源码分析-程序启动与主循环
1 启动 在iOS系统中,由main函数启动默认调用了AppController main.m NSAutoreleasePool * pool = [[NSAutoreleasePool ...
- 使用C# + httpWebRequest 解析WMTS服务元数据
解析http://219.142.81.86/igserver/ogc/kvp/TAS10R52000J49/WMTSServer服务的元数据 // 测试httpWebRequest读取 wmts元数 ...
- Report Studio中树提示如何使用
环境:比如在一个销售数据里面,用户既要选择年,又要选择月,还要选择日,或者是随意选择其中的一个作为筛选条件,如果是Cube的话是可以通过拖拉不同的维度层级来实现该功能的,但是如果是FM开发的DMR模型 ...
- ActiveMQ API 详解
4.1 开发JSM的步骤 广义上说,一个JMS 应用是几个JMS 客户端交换消息,开发JMS 客户端应用由以下几步构成: 用JNDI 得到ConnectionFactory 对象: ...
- auto_ptr
1. int *pi = new int(1024); delete pi; // 释放pi指向的int对象占用的内存空间 pi = 0; // 将pi设置为0,不指向任何东西,为Null 注意:删除 ...
- 使用Loader实时查询本地数据库用法
在看Android的文档时,看到了这么一个东西: Loader 究竟是什么东西呢? Introduced in Android 3.0, loaders make it easy to asynchr ...
- Python网络爬虫 - 2. Beautiful Soup小试牛刀
目标: 我们解析百度首页的logo bs_baidu_logo.py from urllib.request import urlopen from bs4 import BeautifulSoup ...
- mac上xcode4和xcode5共存及修改默认打开方式
先安装xcode4 安装之后,在所有程序里面---改名xcode 为 xcode4 安装xcode5 安装之后,在所有程序里面---改名为xcode 为xcode5 安装4,5之后,默认打开方式就是 ...
- Android画图最基本的三个对象（Color，Paint，Canvas）
Android画图最基本的三个对象(Color,Paint,Canvas) 三个类都存放在 android.graphics包下 1) Color :颜色对象,相当于现实生活中的 ‘调料’ 2) Pa ...
- JUnit 3.8 通过反射测试私有方法
测试私有(private)的方法有两种: 1)把目标类的私有方法(修饰符:private)修改为(public),不推荐,因为修改了源程序不佳 2)通过反射 (推荐) 代码演示: 目标程序 Priva ...