html如何实现选项卡切换思路,Tab选项卡切换完整思路及实现,值得珍藏
原标题:Tab选项卡切换完整思路及实现,值得珍藏
这篇文章是从微信上转载过来的,原文作者是“Java实例解析”,文章内容很棒,只是这个作者可能是一时看不到效果,所以没更新几篇就放弃了,让人惋惜。
今天要推荐给大家的这个js动画效果,基本上每个网站都会出现,就是tab选项卡的切换效果。
这个效果如果使用jQuery这些框架的话,写起来就很方便,但是,为了提高我们的写原生js的能力,所以我一般都会说用原生js来写,如果大家会js框架的话,也可以学着去用框架写。
今天我们要展示的效果图如下:
这是一个可以自动和手动切换的tab效果,实现这个效果的关键点是索引的用法和了解setInterval贺clearInterval函数。
我们首先实现手动切换的效果。
在开始代码之前,我们先理一下思路。当鼠标滑过其中一个标题时,循环取消所有标题的高亮并隐藏所有标题对应的内容,然后给我们滑过的那个标题高亮并显示对应内容。
首先是HTML:
然后是css部分:(由于css不是我们要讲的重点,大家可以直接复制)
@charset "utf-8";
*{margin:0; padding:0; list-style:none; font-size:12px;}
.notice{width:298px; height:98px; margin:10px;}
.notice_tit{height:27px; position:relative;}
.notice_tit ul{position: absolute; width:381px; left:-1px;}
.notice_tit li{float:left; width:58px; height: 26px; line-height: 26px; text-align: center; overflow: hidden; background-color: #fff; padding:0 1px; background-color: #eee; border-bottom:1px solid #eee;}
.notice_tit li.select{background-color: #fff; border-bottom-color: #fff; border-left: 1px solid #eee; border-right:1px solid #eee; padding:0; font-weight: bold;}
.notice_tit li a:link,
.notice_tit li a:visited{text-decoration: none; color:#000;}
.notice_tit li a:hover{color:#f90;}
/*内容部分*/
.notice_con .mod{margin:10px 10px 10px 19px; display: none;}
.notice_con .mod ul li{float:left; width:134px; height:25px; overflow: hidden;}
好了,接下来是js的实现,首先先来封装一个id选择器,然后写出事件
先获取五个标题和内容。并且判断一下,如果标题和内容的数量不对等的话,就取消退出tab切换效果。
获取到所有标题之后,我们就可以对所有标题添加一个鼠标滑过事件,使用for循环来添加。
接着我们就可以在鼠标滑过事件里添加我们刚才的思路了:先循环将所有标题和内容取消高亮和隐藏,再单独给滑过的标题设置高亮和显示对应的内容。
以上,就实现了鼠标滑过时的切换效果了。这是最简单的tab切换效果。整个代码块:
接下来我们可以来个小小的拓展,实现延迟切换效果。就是当鼠标滑过标题时,过了500毫秒(可以自己设定)之后,再执行标题的高亮和对应内容的显示。
这里要使用到setTimeout和clearTimeout函数了。
我们把上面的onmouseover事件里的执行代码写在setTimeout函数里,在500毫秒后执行,并在循环外新增一个变量timer,把这个函数赋给这个变量。
接下来我们发现,在setTimeout的函数里,执行alert(this.id)后弹出undefined,这有两个原因,一是this不是我们要找的当前对象,二是没存在id这个属性。最后结果是由于setTimeout方法是window对象的方法,所以在里面的this指向的就是window对象。因此为了让setTimeout函数里的this指向标题,我们可以在setTimeout函数外通过变量赋值来实现;
此外,我们还需要在指向setTimeout函数之前,先清除定时器,不然当鼠标滑过标题过快时,会累积定时器函数的执行。
这样就可以实现tab延时切换了,整个代码如下:
接下去就是实现自动切换和手动切换的效果了,并且要封装函数,对代码进行优化,大家先把以上的效果熟悉,下节我们继续。祝大家周末愉快哈。返回搜狐,查看更多
责任编辑:
html如何实现选项卡切换思路,Tab选项卡切换完整思路及实现,值得珍藏相关推荐
- 不能随意切换的Tab选项卡页面
不能随意切换的Tab选项卡页面 ------------------------------------- 开发工具与关键技术:Visual Studio 2015 C# 作者:林敏静 撰写时间:20 ...
- html tab选项卡 控件,tab选项卡插件
这是一款使用十分方便的.为移动设备定制的.可在水平和垂直两个方向上显示的jQuery和css3响应式tab选项卡插件.在你要显示很多不同的内容时,tab选项卡导航方式是十分有用的.常见的方式是在同一个 ...
- html tab选项卡 控件,Tab选项卡组件
Tab选项卡组件 Tab组件是根据AppCan 布局框架对数据列表进行封装的JS对象,通过配合的样式,使开发者在界面中可以快速完成选项卡控件的开发. 依赖 appcan.js appcan.contr ...
- Tab选项卡切换效果JavaScript汇总
tab切换在现在的网页上,真是十分的常用呀.但是tab切换的JavaScript实现却有很多需要注意的地方,如何用最少的代码,最灵活的实现.这里收集了37个tab实现的JavaScript代码,在此备 ...
- 使用jQuery开发tab选项卡插件
为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...
- jquery实现tab切换加自动滚动切换
1.用插件switchTab $("#switchBox7").switchTab({defaultIndex: "1", titCell: "dt ...
- 【jQuery】前端项目实践案例1——使用jQuery制作Tab选项卡点击切换效果
1.实现效果: 案例描述:当用户单击不同的导航时,与其对应的内容回相应的呈现. 案例要求:使用jquery制作实现tab选项卡单击切换效果. 2.实现思路: (1)div+css布局,制作选项卡和对应 ...
- iOS开发-iPad侧边栏Tab选项卡切换
Android中习惯了叫侧边栏,iOS中如果不习惯侧边栏称呼的话可以叫dock,侧边栏的切换,类似于Android中的底部导航栏的切换,iPad尺寸大了一些,导航的栏目放在侧边会显示的更好耐看一些.选 ...
- Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果...
<Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果> 实现的组件交互目的很简单,就是要达到类似tab选项卡的导航栏一样,当用户点击了连续并排的若 ...
最新文章
- 2021年深度学习哪些方向比较有研究潜力?
- as3(actionScript3.0) 操作摄像头(Camera)实例
- 论信息部门与业务部门的关系
- nedmalloc结构分析
- 如何让报表告别繁琐?简单操作实现报表联动!
- Asp.Net MVC 3【URLs, Routing,and Areas】续
- HTTPS与HTTP的一些区别
- 如何体验4G极限速度?一部Mate30系列5G轻松搞定
- vs添加系统环境变量不识别_项目经验不重样!3个基于SpringBoot 的图片识别处理系统送给你...
- 网易整合邮箱和博客 可通过邮件更新博客日志
- 游戏中植入广告的例子
- 力扣5713. 字符串中不同整数的数目
- 随机指标计算机程序,MACD/随机指标组合应用分析
- linux文件同步方法,inotify + rsync实现linux文件实时同步
- 2021-07-24博物馆展览馆应用蓝牙AOA高精度定位导航导览的真实商用案例介绍
- 中国互联网20周年谈GITC 2014
- 杨永智:创业者需具备的六大基因 五大攻略(下)
- 修改google搜索引擎非hk方法
- 力扣网-罗马数字转整数
- Vatti clipping 算法介绍
热门文章
- MFC下好用的高速绘图控件-(Hight-Speed Charting)
- DivX和XviD不能不说的故事
- Xvid技术中的精彩部分[转]
- Xshell6连接Linux系统
- springcloud的stream消息组件的使用@StreamListener
- 固原计算机速成班培训,固原日常化妆培训速成班
- CLOCK电子计算机上表示什么,深入浅出SDC - clock定义(上)
- SAP会计科目打删除标记及如何物理删除
- SQLserver 面试题01
- 服务器要删除文件访问被拒绝,Win7系统删除文件提示文件访问被拒绝怎么办