使用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 相关文章推荐
js清理Word格式示例代码
Feb 13 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
javascript实现去除HTML标签的方法
Dec 26 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
vue之浏览器存储方法封装实例
Mar 15 Javascript
微信小程序页面调用自定义组件内的事件详解
Sep 12 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
Oct 15 Javascript
阿望教你用vue写扫雷小游戏
Jan 20 Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 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 Memcache 中实现消息队列
2009/11/24 PHP
认识并使用PHP超级全局变量
2010/01/26 PHP
PHP5函数小全(分享)
2013/06/06 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
PHP读取大文件的几种方法介绍
2016/10/27 PHP
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
2013/01/27 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
python实现简单名片管理系统
2018/11/30 Python
python TF-IDF算法实现文本关键词提取
2019/05/29 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
python web框架中实现原生分页
2019/09/08 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
python unichr函数知识点总结
2020/12/16 Python
Python页面加载的等待方式总结
2021/02/28 Python
金额转换,阿拉伯数字的金额转换成中国传统的形式如:(¥1011)-> (一千零一拾一元整)输出
2015/05/29 面试题
销售类个人求职信范文
2013/09/25 职场文书
行政助理求职自荐信
2013/10/26 职场文书
婚礼主持词开场白
2014/03/13 职场文书
周年庆典答谢词
2015/01/20 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL