栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

jquery的index方法实现tab效果

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

jquery的index方法实现tab效果


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

原理:

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

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

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

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

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

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

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

只用了5行。
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/114541.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号