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对象的支持
Jul 25 Javascript
jquery实现弹出层遮罩效果的简单实例
Mar 03 Javascript
node.js [superAgent] 请求使用示例
Mar 13 Javascript
js实现模拟银行卡账号输入显示效果
Nov 18 Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
vue proxy 的优势与使用场景实现
Jun 15 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 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
PHP操作mysql函数详解,mysql和php交互函数
2011/05/19 PHP
PHP获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
js实现多图左右切换功能
2016/08/04 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
java直接调用python脚本的例子
2014/02/16 Python
python批量提交沙箱问题实例
2014/10/08 Python
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
使用Python来开发微信功能
2018/06/13 Python
Python子类继承父类构造函数详解
2019/02/19 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
python requests抓取one推送文字和图片代码实例
2019/11/04 Python
python利用dlib获取人脸的68个landmark
2019/11/27 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
python各层级目录下import方法代码实例
2020/01/20 Python
详解用python -m http.server搭一个简易的本地局域网
2020/09/24 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
给物业的表扬信
2014/01/21 职场文书
优秀员工获奖感言
2014/03/01 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
库房管理员岗位职责
2015/02/12 职场文书
城管个人总结
2015/02/28 职场文书
电影建党伟业观后感
2015/06/01 职场文书
养成教育主题班会
2015/08/13 职场文书