jquery的index方法实现tab效果

 更新时间:2011年02月16日 16:12:16   作者:  
jquery的index方法实现tab效果,需要的朋友可以参考下。

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

原理:

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

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

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

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

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

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

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

只用了5行。

相关文章

  • jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】

    jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】

    这篇文章主要介绍了jQuery插件HighCharts绘制简单2D折线图效果,结合完整实例形式分析了jQuery使用HighCharts插件绘制折线图的实现步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2017-03-03
  • Jquery实现获取子元素的方法分析

    Jquery实现获取子元素的方法分析

    这篇文章主要介绍了Jquery实现获取子元素的方法,结合实例形式分析了jQuery针对页面元素的查找、获取相关操作技巧,需要的朋友可以参考下
    2019-08-08
  • jQuery对象和DOM对象相互转化

    jQuery对象和DOM对象相互转化

    jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法,但是不能使用DOM的方法;例如$("#img").attr("src","test.jpg"); 这里的$("#img")就是jQuery对象;
    2009-04-04
  • jquery序列化表单去除指定元素示例代码

    jquery序列化表单去除指定元素示例代码

    这篇文章主要介绍了如何使用jquery序列化表单去除指定元素,需要的朋友可以参考下
    2014-04-04
  • jQuery中$.ajax()方法参数解析

    jQuery中$.ajax()方法参数解析

    这篇文章主要为大家详细解析了jQuery中$.ajax()方法参数,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • jQuery层次选择器用法示例

    jQuery层次选择器用法示例

    这篇文章主要介绍了jQuery层次选择器用法,结合实例形式分析了jQuery针对页面元素层级操作的层次选择器使用技巧,需要的朋友可以参考下
    2016-09-09
  • jQuery 判断页面元素是否存在的代码

    jQuery 判断页面元素是否存在的代码

    在传统的Javascript里,当我们对某个页面元素进行某种操作前,最好先判断这个元素是否存在。原因是对一个不存在的元素进行操作是不允许的。
    2009-08-08
  • Easyui使用Dialog行内按钮布局的实例

    Easyui使用Dialog行内按钮布局的实例

    下面小编就为大家带来一篇Easyui使用Dialog行内按钮布局的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • jquery过滤特殊字符'',防sql注入的实现方法

    jquery过滤特殊字符'',防sql注入的实现方法

    下面小编就为大家带来一篇jquery过滤特殊字符',防sql注入的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法

    jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法

    这篇文章主要介绍了jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法,涉及jQuery数值运算及条件判断等相关操作技巧,需要的朋友可以参考下
    2019-01-01

最新评论