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 异步调用框架 (Part 4 - 链式调用)
Aug 04 Javascript
Javascript Object.extend
May 18 Javascript
JS 如果改变span标签的是否隐藏属性
Oct 06 Javascript
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
如何在MVC应用程序中使用Jquery
Nov 17 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
JS实现点击按钮可实现编辑功能
Jul 03 Javascript
Vue配置marked链接添加target="_blank"的方法
Jul 19 Javascript
vue-router中hash模式与history模式的区别
Jun 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 301转向实现代码
2008/09/18 PHP
php mssql 日期出现中文字符的解决方法
2009/03/10 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
jquery ajax方式直接提交整个表单核心代码
2013/08/15 Javascript
删除节点的jquery代码
2014/01/13 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
js实现秒表计时器
2019/12/16 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
Python Socket传输文件示例
2017/01/16 Python
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
canvas绘制树形结构可视图形的实现
2020/04/03 HTML / CSS
安全员岗位职责
2013/11/11 职场文书
专业销售业务员求职信
2013/11/18 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
2014年干部作风建设总结
2014/10/23 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
汽车修理厂管理制度
2015/08/05 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
导游词之秦始皇兵马俑博物馆
2019/09/29 职场文书
Go 在 MongoDB 中常用查询与修改的操作
2021/05/07 Golang
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL