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 相关文章推荐
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
Aug 05 Javascript
纯CSS3代码实现滑动开关效果
Aug 19 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
学习JavaScript设计模式(策略模式)
Nov 26 Javascript
Bootstrap媒体对象的实现
May 01 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
Mar 20 Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 Javascript
js实现旋转木马轮播图效果
Jan 10 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 08 Javascript
微信小程序实现音乐播放页面布局
Dec 11 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使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
PHP简单生成缩略图相册的方法
2015/07/29 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
js实现鼠标跟随运动效果
2020/08/02 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
Python脚本实现代码行数统计代码分享
2015/03/10 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
CSS3中文字镂空、透明值、阴影效果设置示例小结
2016/03/07 HTML / CSS
美国现代家具网站:Design Within Reach
2018/07/19 全球购物
个人评价范文分享
2014/01/11 职场文书
群众路线剖析材料
2014/02/02 职场文书
文明村镇申报材料
2014/05/06 职场文书
优秀三好学生事迹材料
2014/08/31 职场文书
行政处罚听证告知书
2015/07/01 职场文书
flex弹性布局详解
2022/03/20 HTML / CSS