jquery的index方法实现tab效果


Posted in Javascript onFebruary 16, 2011

jquery的index方法实现tab效果
左侧为选项卡,右侧为详细内容。

原理:

点击左侧的列表项,根据所选列表项在列表的[索引n]显示第n个内容。

(首先需要将列表和内容一次性加载到页面,内容只显示第一个,这样切换起来更友好。)

如何获取选择列表项在列表中的索引:

jquery里有一个方法是index([subject])

$("#ul li").index($("#selected"));

意思是 首先设定列表范围(#ul li列表),然后返回$("#selected")元素在列表中的索引。

获取到索引之后,在用$("#detail").hide(); $("#detail").eq(n).show(); 来显示相同索引的详情。(选项列表样式切换同理)

只用了5行。

Javascript 相关文章推荐
Javascript String.replace的妙用
Sep 08 Javascript
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
Js+php实现异步拖拽上传文件
Jun 23 Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
Sep 03 Javascript
JS实现复选框的全选和批量删除功能
Apr 05 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
深入理解react 组件类型及使用场景
Mar 07 Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 Javascript
jQuery ready函数滥用分析
Feb 16 #Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 #Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
Feb 14 #Javascript
JQuery 选择器、过滤器介绍
Feb 14 #Javascript
AJAX分页的代码(后台asp.net)
Feb 14 #Javascript
基于jquery的图片的切换(以数字的形式)
Feb 14 #Javascript
jquery isType() 类型判断代码
Feb 14 #Javascript
You might like
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
PHP滚动日志的代码实现
2015/06/10 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
使用JavaScript构建JSON格式字符串实现步骤
2013/03/22 Javascript
js有序数组的连接问题
2013/10/01 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
对类Vue的MVVM前端库的实现代码
2018/09/07 Javascript
js实现每日签到功能
2018/11/29 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
Python遍历文件夹和读写文件的实现方法
2017/05/10 Python
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
Python字符串的常见操作实例小结
2019/04/08 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
jupyter notebook实现显示行号
2020/04/13 Python
python 实现端口扫描工具
2020/12/18 Python
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
会计毕业生自荐信
2013/11/21 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
党员教师批评与自我批评发言稿
2014/10/15 职场文书
数学教师个人工作总结
2015/02/06 职场文书
大学生预备党员自我评价
2015/03/04 职场文书
校园音乐节目广播稿
2015/08/19 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书