使用jquery实现div的tab切换实例代码


Posted in Javascript onMay 27, 2013

jQuery实现Tab切换 接触jQ不久以前的js代码来写的简单效果现在用jQ来写:
HTML代码:

<div id="sidebar-tab"> 
<div id="tab-title"> 
<h3><span class="selected">最新评论</span><span>近期热评</span><span>随机文章</span></h3> 
</div> 
<div id="tab-content"> 
<ul><li>1234567890-1</li></ul> 
<ul class="hide"><li>1234567890-2</li></ul> 
<ul class="hide"><li>1234567890-3</li></ul> 
</div> </div>

css代码:
#sidebar-tab{border:1px solid #ccf;margin-bottom:1.5em;overflow:hidden;} 
#tab-title h3{color:#666;font-size:15px;font-weight:400;} 
#tab-title .selected{color:#356aa0;border-bottom:0px;} /*标题被选中时的样式*/ 
#tab-title span{padding:5px 9px 5px 10px;border:1px solid #ccf;border-right:0px;margin-left:-1px;cursor:pointer;} 
#tab-content .hide{display:none;} /*默认让第一块内容显示,其余隐藏*/ 
#tab-content ul{padding:5px 10px;overflow:hidden;} 
#tab-content ul li{padding-top:5px;height:20px;}

jQ代码:
<script language="javascript"> 
$('#tab-title span').click(function(){ 
$(this).addClass("selected").siblings().removeClass();//removeClass就是删除当前其他类;只有当前对象有addClass("selected");siblings()意思就是当前对象的同级元素,removeClass就是删除; 
$("#tab-content > ul").hide().eq($('#tab-title span').index(this)).show(); 
}); 
</script>

用jQ来写很方便;先是找到ID中的子元素添加事件click引入函数;找到同级元素后removeClass();让其他同级元素this时display:”none“;

下面是原来的jQ代码:

<script> $('#tab-title span').click(function(){ $(this).addClass("selected").siblings().removeClass(); $("#tab-content > ul").slideUp('1500').eq($('#tab-title span').index(this)).slideDown('1500') 
}); 
</script>

当你触发当前事件后再点击当前事件还会触发它;没有必要点击当前事件时还触发事件(this);
Javascript 相关文章推荐
javascript下高性能字符串连接StringBuffer类
Aug 16 Javascript
js 金额文本框实现代码
Feb 14 Javascript
javascript数组常用方法汇总
Sep 10 Javascript
js实现分页功能
May 24 Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
AugularJS从入门到实践(必看篇)
Jul 10 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 #Javascript
jquery实现的一个导航滚动效果具体代码
May 27 #Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
May 27 #Javascript
jQuery数据缓存功能的实现思路及简单模拟
May 27 #Javascript
jQuery函数的等价原生函数代码示例
May 27 #Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 #Javascript
jQuery动态地获取系统时间实现代码
May 24 #Javascript
You might like
php下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
PHP 工厂模式使用方法
2010/05/18 PHP
PHP数据类型之布尔型的介绍
2013/04/28 PHP
Linux下安装oracle客户端并配置php5.3
2014/10/12 PHP
用javascript实现给图片加链接
2007/08/15 Javascript
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
js弹出层之1:JQuery.Boxy (二)
2011/10/06 Javascript
js不能跳转到上一页面的问题解决方法
2013/03/01 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
vue 使用原生组件上传图片的实例
2020/09/08 Javascript
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
Pandas中把dataframe转成array的方法
2018/04/13 Python
在Python中分别打印列表中的每一个元素方法
2018/11/07 Python
Python 切分数组实例解析
2019/11/07 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
提高EJB性能都有哪些技巧
2012/03/25 面试题
英语师范专业毕业生自荐信
2013/09/21 职场文书
宿舍使用违章电器检讨书
2014/01/12 职场文书
军训学生自我鉴定
2014/02/12 职场文书
银行金融服务方案
2014/06/11 职场文书
保管员岗位职责
2015/02/14 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
Python基础详解之邮件处理
2021/04/28 Python