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中获取出错代码所在文件及行数的代码
Sep 23 Javascript
jQuery的链式调用浅析
Dec 03 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 Javascript
jquery分页插件AmSetPager(自写)
Apr 15 Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
js中的事件委托或是事件代理使用详解
Jun 23 Javascript
从零开始最小实现react服务器渲染详解
Jan 26 Javascript
js 将线性数据转为树形的示例代码
May 28 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 Javascript
vue单应用在ios系统中实现微信分享功能操作
Sep 07 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
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
又一个图片自动缩小的JS代码
2007/03/10 Javascript
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
offsetParent 算法分析
2010/04/05 Javascript
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
python抓取网页中图片并保存到本地
2015/12/01 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
python实现大文本文件分割
2019/07/22 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
python绘制分布折线图的示例
2020/09/24 Python
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
巴西食品补充剂在线零售商:Músculos na Web
2017/08/07 全球购物
轻化专业学生实习自我鉴定
2013/09/20 职场文书
2014信息公开实施方案
2014/02/22 职场文书
双方协议书
2014/04/22 职场文书
房地产广告策划方案
2014/05/15 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
家属联谊会致辞
2015/07/31 职场文书
中学政教处工作总结
2015/08/13 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书