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关于页面焦点的定位(文本框获取焦点时改变样式 )
Sep 10 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
JS实现在文本指定位置插入内容的简单示例
Dec 22 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
微信小程序实现点赞、取消点赞功能
Nov 02 Javascript
微信小程序页面间值传递的两种方法
Nov 26 Javascript
react中Suspense的使用详解
Sep 01 Javascript
Vue实现页面添加水印功能
Nov 09 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
Apr 22 Javascript
微信小程序实现天气预报功能(附源码)
Dec 10 Javascript
手动实现vue2.0的双向数据绑定原理详解
Feb 06 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
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
php 模拟POST提交的2种方法详解
2013/06/17 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
怎样搭建PHP开发环境
2015/07/28 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
php创建类并调用的实例方法
2019/09/25 PHP
js中document.write的那点事
2014/12/12 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
三种方式实现瀑布流布局
2017/02/10 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
Python 2.7中文显示与处理方法
2018/07/16 Python
Python中的引用知识点总结
2019/05/20 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
Python3分析处理声音数据的例子
2019/08/27 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
2019/09/25 HTML / CSS
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
国际经济贸易专业推荐信
2013/11/06 职场文书
新娘父亲婚礼致辞
2014/01/16 职场文书
校企合作协议书
2014/04/16 职场文书
社区春季防火方案
2014/06/02 职场文书
超市理货员岗位职责
2014/07/04 职场文书
就业协议书
2014/09/12 职场文书
法务专员岗位职责
2015/02/14 职场文书