使用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 相关文章推荐
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
jQuery遍历对象、数组、集合实例
Nov 08 Javascript
js实现简单锁屏功能实例
May 27 Javascript
简单谈谈javascript Date类型
Sep 06 Javascript
javascript事件绑定学习要点
Mar 09 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
JavaScript仿网易选项卡制作代码
Oct 06 Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 Javascript
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
详解Vue Cli浏览器兼容性实践
Jun 08 Javascript
JavaScript中如何调用Java方法
Sep 16 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 快速排序算法详解
2014/11/10 PHP
PHP检测用户语言的方法
2015/06/15 PHP
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
Vue按需加载的具体实现
2017/12/02 Javascript
VueRouter导航守卫用法详解
2017/12/25 Javascript
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
Python logging模块学习笔记
2014/05/24 Python
python计算圆周率pi的方法
2015/07/11 Python
fastcgi文件读取漏洞之python扫描脚本
2017/04/23 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
python购物车程序简单代码
2018/04/18 Python
Python使用Flask-SQLAlchemy连接数据库操作示例
2018/08/31 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
Python selenium使用autoIT上传附件过程详解
2020/05/26 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
英语专业应届生求职信范文
2013/11/15 职场文书
毕业典礼主持词大全
2014/03/26 职场文书
国贸专业求职信
2014/06/28 职场文书
大学军训的体会
2014/11/08 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
药房管理制度范本
2015/08/06 职场文书