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优化技巧(文件瘦身篇)
Jan 28 Javascript
JavaScript访问样式表代码
Oct 15 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
May 18 Javascript
js实现计时器秒表功能
Dec 16 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
基于文本的留言簿
2006/10/09 PHP
php通过字符串调用函数示例
2014/03/02 PHP
yii框架配置默认controller和action示例
2014/04/30 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
php实现的简单日志写入函数
2015/03/31 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
JS支持带x身份证号码验证函数
2008/08/10 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
js继承实现方法详解
2016/12/16 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
深入浅析Vue 中 ref 的使用
2019/04/29 Javascript
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
Pretty Little Thing爱尔兰:时尚女性服饰
2017/03/27 全球购物
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
新品发布会策划方案
2014/06/08 职场文书
劳模事迹材料范文
2014/12/24 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
Java Kafka 消费积压监控的示例代码
2021/07/01 Java/Android
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers