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 相关文章推荐
PJ Blog修改-禁止复制的代码和方法
Oct 25 Javascript
JScript中的undefined和"undefined"的区别
Mar 08 Javascript
Display SQL Server Login Mode
Jun 21 Javascript
dreamweaver 安装Jquery智能提示
Apr 02 Javascript
js控制frameSet示例
Sep 10 Javascript
jsp网页搜索结果中实现选中一行使其高亮
Feb 17 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
vue2.X组件学习心得(新手必看篇)
Jul 05 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
AngularJS实现表单元素值绑定操作示例
Oct 11 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 Javascript
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
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显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
php对二维数组进行排序的简单实例
2013/12/19 PHP
php跨域cookie共享使用方法
2014/02/20 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
jquery实现左右滑动式轮播图
2017/03/02 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
2017/08/23 jQuery
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
PyQt+socket实现远程操作服务器的方法示例
2019/08/22 Python
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
AJAX的优缺点都有什么
2015/08/18 面试题
送餐员岗位职责范本
2014/02/21 职场文书
《云雀的心愿》教学反思
2014/02/25 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
运动会广播稿50字
2015/08/19 职场文书
入党申请书怎么写?
2019/06/21 职场文书
Python数据分析入门之数据读取与存储
2021/05/13 Python
Python图片验证码降噪和8邻域降噪
2021/08/30 Python