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对checkbox操作 (循环获取)
May 20 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 Javascript
JS的Document属性和方法小结
Sep 17 Javascript
javascript折半查找详解
Jan 26 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
jQuery操作json常用方法示例
Jan 04 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
js循环map 获取所有的key和value的实现代码(json)
May 09 Javascript
浅析node.js的模块加载机制
May 25 Javascript
vuex页面刷新后数据丢失的方法
Jan 17 Javascript
node.js微信小程序配置消息推送的实现
Feb 13 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
Sep 23 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函数)
2006/10/09 PHP
php 模拟get_headers函数的代码示例
2013/04/27 PHP
10个简化PHP开发的工具
2014/12/25 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
php图片上传类 附调用方法
2016/05/15 PHP
详解PHP文件的自动加载(autoloading)
2018/02/04 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
自制轻量级仿jQuery.boxy对话框插件代码
2010/10/26 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
javascript setTimeout和setInterval计时的区别详解
2013/06/21 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
2017/07/22 jQuery
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
详解Python3中yield生成器的用法
2015/08/20 Python
分享Python字符串关键点
2015/12/13 Python
python实现邮件自动发送
2019/08/10 Python
keras 权重保存和权重载入方式
2020/05/21 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
公司感恩节活动策划书
2014/10/11 职场文书
文明单位申报材料
2014/12/23 职场文书
小学优秀学生评语
2014/12/29 职场文书
给老婆的保证书
2015/01/16 职场文书
初中生物教学反思
2016/02/20 职场文书
python如何进行基准测试
2021/04/26 Python
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python