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 相关文章推荐
InnerHtml和InnerText的区别分析
Mar 13 Javascript
基于jQuery的倒计时插件代码
May 07 Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
Vue中使用的EventBus有生命周期
Jul 12 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
May 01 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(1) php开发环境配置
2010/02/15 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
Pyhton中防止SQL注入的方法
2015/02/05 Python
python通过文件头判断文件类型
2015/10/30 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
Python生成器generator原理及用法解析
2020/07/20 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
Python实现曲线拟合的最小二乘法
2021/02/19 Python
html5唤醒APP小记
2019/03/27 HTML / CSS
施华洛世奇意大利官网:SWAROVSKI意大利
2018/07/23 全球购物
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
C#面试题问题集
2016/04/02 面试题
个人求职信范例
2014/01/29 职场文书
《太阳》教学反思
2014/02/21 职场文书
承诺书格式范文
2014/06/03 职场文书
士兵突击观后感
2015/06/16 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android