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下利用fso判断文件是否存在的代码
Dec 11 Javascript
不同Jquery版本引发的问题解决
Oct 14 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
JavaScript知识点整理
Dec 09 Javascript
jQuery Ajax 全局调用封装实例代码详解
Jun 02 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 Javascript
基于Vuex无法观察到值变化的解决方法
Mar 01 Javascript
详解Immutable及 React 中实践
Mar 01 Javascript
JS装饰器函数用法总结
Apr 21 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 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
追求程序速度,而不是编程的速度
2008/04/23 PHP
简述Jquery与DOM对象
2015/07/10 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
React Native模块之Permissions权限申请的实例相机
2017/09/28 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
iview table高度动态设置方法
2018/03/14 Javascript
微信小程序项目实践之主页tab选项实现
2018/07/18 Javascript
将RGB值转换为灰度值的简单算法
2019/10/09 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
2020/07/24 Javascript
常用python编程模板汇总
2016/02/12 Python
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
python使用matplotlib绘制柱状图教程
2017/02/08 Python
Python绑定方法与非绑定方法详解
2017/08/18 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
python 递归相关知识总结
2021/03/03 Python
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
在求职信中如何凸显个人优势
2013/10/30 职场文书
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
信息服务专业毕业生求职信
2014/03/02 职场文书
自荐信的格式
2014/03/10 职场文书
课程改革实施方案
2014/03/16 职场文书
交通安全标语
2014/06/06 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
中学生打架检讨书
2014/10/13 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
教师自荐信范文
2015/03/06 职场文书
高中历史教学反思
2016/02/19 职场文书
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android