jquery的index方法实现tab效果



左侧为选项卡,右侧为详细内容。

原理:

点击左侧的列表项,根据所选列表项在列表的[索引n]显示第n个内容。

(首先需要将列表和内容一次性加载到页面,内容只显示第一个,这样切换起来更友好。)

如何获取选择列表项在列表中的索引:

jquery里有一个方法是index([subject])

$("#ul li").index($("#selected"));

意思是 首先设定列表范围(#ul li列表),然后返回$("#selected")元素在列表中的索引。

获取到索引之后,在用$("#detail").hide(); $("#detail").eq(n).show(); 来显示相同索引的详情。(选项列表样式切换同理)

只用了5行。



相关阅读:
Windows还原点不起作用的原因
javascript removeChild 导致的内存泄漏
在Linux系统下Mldonkey配置和使用方法
最常用的PHP正则表达式收集整理
12个对网页设计师非常有用的图片优化工具
SQL Server 2008几项新特性概述
用javascript实现div可编辑的常见方法
ASP.NET2.0调用MySql的存储过程
Windows系统Regsvr32命令的用途
深入分析网页CSS隐藏文字和以图换字技术
oracle的启动方式和相关的命令参数一览
SQL学习笔记一SQL基础知识
javascript初学者:全面学习对象概念
ubuntu8.04版本tftp的安装
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4