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 相关文章推荐
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
Nov 13 Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
Jun 10 Javascript
介绍一个简单的JavaScript类框架
Jun 24 Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 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中取得URL的根域名的代码
2011/03/23 PHP
php生成数组的使用示例 php全组合算法
2014/01/16 PHP
PHP+MYSQL实现用户的增删改查
2015/03/24 PHP
JavaScript 弹出窗体点击按钮返回选择数据的实现
2010/04/01 Javascript
JS 文件大小判断的实现代码
2010/04/07 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
2010/12/14 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
python环形单链表的约瑟夫问题详解
2018/09/27 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
python 实现多维数组(array)排序
2020/02/28 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
摄影实习自我鉴定
2013/09/20 职场文书
见习期自我鉴定
2013/11/07 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
MySQL 数据类型详情
2021/11/11 MySQL
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js