html tab与jQuery,使用jquery实现div的tab切换实例代码

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

HTML代码:

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代码:

$('#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();

});

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

下面是原来的jQ代码:

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

});

当你触发当前事件后再点击当前事件还会触发它;没有必要点击当前事件时还触发事件(this);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/468016.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

调试,是一件有挑战的事情

如果你不是工程师,你应该享受不到加班调试的乐趣吧,我记得在大学的时候,我第一次调试I2C时序,当时用的芯片是24C02的RTC芯片,用51单片机模拟I2C时序,怎么整也整不出来,时序这个东西,…

make 命令_make考点总结(建议中、高考学生收藏)

考点一、“make宾语宾语补足语”结构1、这个结构表示“ 使…… 处于某种状态”“ 使……怎么样”。其中宾语的补足语,通常是表示情感的词(happy, sad)或者是表示状态的词(rich, strong, ill)。比如,Make your room clean.“使你的房间干净”,…

如何通俗易懂的解释PWM?

学过电力电子的小伙伴们都知道…交流电“整流”为直流电(a)…直流电“逆变”为交流电(b)…交流电“变压”为交流电(c)…直流电“斩波”为直流电(d)…“变压”(c&#xff…

计算机与环境科学,计算机在环境科学与工程方向的应用

计算机技术与环境应用21世纪是信息时代,作为信息化社会标志的计算机也愈来愈广泛地为人类所掌握和利用。计算机的便捷和高效性提高着社会的生产力,使人们创造着前所未有的物质财富。与此同时,人口的快速增长、资源的过度消耗、环境污染和生态…

一个前辈总结的思考

文章是一个互联网的前辈写的,但是我觉得技术应该不分什么互联网不互联网,里面说到的一些内容,值得我们借鉴,分享给大家,希望大家能有一些认知上的收获,比较接地气,内容中讲到送外卖的部分也是真…

python历史波动率_历史波动率计算(旧文)

按照豆粕期权的说明,挂盘基准价使用的波动率是按照波动率取期货合约90天的历史波动率那么问题来了,如何计算波动率呢? 学过金融的朋友可能会觉得很容易,当然的确很容易。但是如果是从计算机等学科过来的朋友,对于波动率…

东南大学计算机学院张敏灵,东南大学张敏灵教授来我校作学术报告

10月24日下午,在南校区怀德楼B410会议室,东南大学计算机科学与工程学院张敏灵教授作题为“偏标记学习的研究”学术报告。报告由信息工程学院院长陈荣主持,信息学院师生聆听报告。张敏灵教授介绍了偏标记学习及相关研究工作的展开。偏标记学习…

我准备毕业了,怎么规划我的职业生涯?

昨天,微信上收到一个读者的留言,想咨询一下职业规划,碰巧的是,他非常喜欢驱动相关的工作,刚好碰巧的是,我有这方面的经验,所以很耐心的解答了下,发出来给更多的人看看,希…

hdoj 1285 确定比赛名次 【拓扑排序】

确定比赛名次 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submission(s): 17142 Accepted Submission(s): 6794Problem Description有N个比赛队&#xff08;1<N<500&#xff09;&#xff0c;编号依次为1。2&#xf…

计算机音乐奔跑,跑起来!100首最适合跑步的音乐

原标题&#xff1a;跑起来&#xff01;100首最适合跑步的音乐喜爱跑步、健身的人&#xff0c;都喜欢一边听音乐一边运动&#xff0c;而且会比没有音乐时燃烧脂肪速度要快&#xff0c;提高新陈代谢的能力&#xff01;小乐君今天给大家盘点100首全球最受欢迎的跑步音乐&#xff0…

python安装虚拟环境出现错误_virtualenv 安装虚拟环境问题 请大神指点一二

F:\Django学习>virtualenv Django-envUsing base prefix c:\\users\\帅帅\\appdata\\local\\programs\\python\\python36New python executable in F:\Django学习\Django-env\Scripts\python.exeInstalling setuptools, pip, wheel...Complete output from command F:\Djang…

危难时刻,每个人都应该站出来

转发一条同济医院发的我来给大家减轻一下恐慌。说实话目前这个肺炎传染性的确很强&#xff0c;但是重症发生率并不高&#xff0c;多出现在有基础疾病身体状况不好的老年人。一般患者就是自行隔离休息是最好的处理方式&#xff0c;一周也就恢复但是隔离需要14天&#xff0c;隔离…

计算机程序设计基础试题与答案,2018年4月自考计算机基础与程序设计02275试题及答案.doc...

页 PAGE \* MERGEFORMAT9第二部分非选择题二、填空题&#xff1a;本大题共l0小题&#xff0c;每小题l分&#xff0c;共10分。21&#xff0e;在计算机中&#xff0c;处理器一次运算能处理的二进制数的位数称为_______。22&#xff0e;真值为&#xff0e;1001 101的机器数是_____…

Maven整合Spring3.0+Mybatis3.2+Struts2.3+查找坐标+jar包依赖(五)

依赖传递 只添加了一个struts2-core依赖&#xff0c;发现项目中出现了很多jar&#xff0c;这种情况 叫 依赖传递 查找坐标 依赖版本冲突的解决 1、 第一声明优先原则 <dependencies><!-- spring-beans-4.2.4 --><dependency><groupId>org.springfra…

python cmd命令 循环传参数_将参数从cmd传递给python脚本

我在python中编写脚本并通过输入以下命令运行cmd&#xff1a;C:\> python script.py我的一些脚本包含基于标志调用的单独算法和方法.现在我想通过cmd直接传递标志,而不是必须进入脚本并在运行之前更改标志,我想要类似于&#xff1a;C:\> python script.py -algorithm2我读…

再见了,唠嗑

先是武汉&#xff0c;突然又是科比&#xff0c;真是难受&#xff0c;麻痹的&#xff0c;这世界是怎么了&#xff1f;开始看篮球就是从黑科比开始&#xff0c;后来&#xff0c;慢慢喜欢科比&#xff0c;这其中的转变&#xff0c;真的是因为他是一个勤奋刻苦的人&#xff0c;指引…

不使用杀毒软件就上网也不会感染计算机病毒,【判断题】不使用杀毒软件就上网也不会感染计算机病毒。 A. 正确 B. 错误...

【判断题】不使用杀毒软件就上网也不会感染计算机病毒。A. 正确B. 错误更多相关问题排烟窗应设置在排炯区域的顶部或外墙&#xff0c;关于应符合要求的说法&#xff0c;错误的是() A.当设置在外墙上时&#xff0c;排设备基础对机械设备安装精度影响的主要因素是()nA.基础的外形…

6.openldap客户端安装

作者:yaoyao 1.账号登录系统流程讲解 当在客户端输入账号登录系统时、系统根据/etc/nsswitch.conf配置文件获取账号查找顺序&#xff0c;然后在根据pam配置文件调用相关模块&#xff0c;对账号/etc/passwd及密码/etc/shadow进行查找并进行匹配&#xff0c;当本地匹配不成功时、…

尊重钟南山,但请也给我们哀悼科比

今天疫情更加严重了&#xff0c;睡了一觉&#xff0c;早上起来看到确诊人数又多出一千多人&#xff0c;按照这个增长速度&#xff0c;情况岌岌可危&#xff0c;想到我们这个小山村&#xff0c;刚好可以躲避疫情。早上我妈还跟我说&#xff0c;想去河池飞机场看看&#xff0c;辛…

计算机不断自动重启,电脑不断自动重启怎么办_解决电脑不断自动重启的方法...

有不少网友经常遇到电脑经常自动重启的情况&#xff0c;但是又不知道是什么原因造成的&#xff0c;很是困惑。同时也很是影响我们使用电脑&#xff0c;那我们要怎么解决这一问题呢&#xff1f;下面小编就来为大家分享解决电脑不断自动重启的方法。解决方法如下&#xff1a;1、在…