使用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 相关文章推荐
jquery获取input表单值的代码
Apr 19 Javascript
15条JavaScript最佳实践小结
Aug 09 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 Javascript
改变隐藏的input中value值的方法
Mar 19 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
Aug 14 Javascript
在JS循环中使用async/await的方法
Oct 12 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
vue-cli3中vue.config.js配置教程详解
May 29 Javascript
Vue实现跑马灯效果
May 25 Javascript
微信小程序 WeUI扩展组件库的入门教程
Apr 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 heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
linux下 C语言对 php 扩展
2008/12/14 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
php中引用符号(&amp;)的使用详细介绍
2016/12/06 PHP
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
vue 使用外部JS与调用原生API操作示例
2019/12/02 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
python中日期和时间格式化输出的方法小结
2015/03/19 Python
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
Python中的条件判断语句与循环语句用法小结
2016/03/21 Python
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
Django自定义认证方式用法示例
2017/06/23 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
Python装饰器简单用法实例小结
2018/12/03 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
品质口号大全
2014/06/17 职场文书
2014幼儿园教师个人工作总结
2014/11/08 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python