jquery的index方法实现tab效果


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

原理：

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

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

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

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

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

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

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

只用了5行。

赞 (0)

相关推荐

  • JQuery使用index方法获取Jquery对象数组下标的方法

    本文实例讲述了JQuery使用index方法获取Jquery对象数组下标的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

  • jQuery中index()的用法分析

    本文实例讲解了jQuery中index()的用法.分享给大家供大家参考之用.具体方法如下: 现在有这样一个问题:如果列表里面有N多的列表项目,我想知道我点击了哪一个应该怎么取呢? 对此,jQuery里面提供了一个index()方法 : index(subject) 该方法搜索与参数表示的对象匹配的元素,并返回相应元素的索引值. 如果找到了匹配的元素,从0开始返回:如果没有找到匹配的元素,返回-1. 但是 API里面提供的例子貌似不对,示例如下: <ul> <li><a hre

  • JQuery index()方法使用代码

    学生科的网站首页有19个Repeater控件.6个div块的tabs切换. 做tabs切换总不能一个个去写方式吧:(代码如下....) 复制代码 代码如下: $(function() { $("#tabs a:eq(0),#tabs2 a:eq(0),#dbt_l_t_tabs a:eq(0),#dbt_r_t_tabs a:eq(0)").addClass("m_on"); $("#tabs a:gt(0),#tabs2 a:gt(0),#dbt_l_t

  • Jquery index()方法 获取相应元素索引值

    index([subject])方法,返回值:Number(从0开始计数) index()方法返回指定元素相对于其他指定元素的 index 位置.注释:如果未找到元素,index() 将返回 -1. 复制代码 代码如下: <html> <head> <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.4.2/jquery.min.js">&l

  • jQuery中index()方法用法实例

    本文实例讲述了jQuery中index()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以搜索匹配元素,并返回元素的索引值. 索引值是从0开始的. 语法结构一: 当此方法没有参数的时候,返回值是指定元素在其同辈元素集合中的索引位置. 复制代码 代码如下: $(selector).index() 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8&quo

  • jquery获取元素索引值index()示例

    jquery获取元素索引值index()方法: jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置. 如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置. 如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置.如果找不到匹配的元素,则返回-1. 复制代码 代码如下: <ul> <

  • jQuery 中$(this).index与$.each的使用指南

    工作当中响应某个需求,切换选项卡的一个效果,根据每个选项下的内容元素的总数不同而进行不同的html变化(如果选项卡下的内容为空就等于XXX,否则就XXX) 复制代码 代码如下: $(function(){          $(".bao").hide();           $(".bao").eq(0).show();           $(".head li").click(function(){               $(thi

  • jquery根据属性和index来查找属性值并操作

    <div class="zy_menu clearfix"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" re

  • jquery的index方法实现tab效果

    jquery的index方法实现tab效果

    左侧为选项卡,右侧为详细内容. 原理: 点击左侧的列表项,根据所选列表项在列表的[索引n]显示第n个内容. (首先需要将列表和内容一次性加载到页面,内容只显示第一个,这样切换起来更友好.) 如何获取选择列表项在列表中的索引: jquery里有一个方法是index([subject]) $("#ul li").index($("#selected")); 意思是 首先设定列表范围(#ul li列表),然后返回$("#selected")元素在列表中

  • jQuery实现MSN中文网滑动Tab菜单效果代码

    jQuery实现MSN中文网滑动Tab菜单效果代码

    本文实例讲述了jQuery实现MSN中文网滑动Tab菜单效果代码.分享给大家供大家参考.具体如下: 这是一款jQuery实现Msn中文网的滑动滑动门代码,利用jQuery实现的效果,代码很巧妙,就是利用一个绝对定位的层来实现移动效果,但是体验度大幅提升了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-msn-tab-menu-style-codes/ 具体代码如下: <!DOCTYPE html> <html>

  • jquery实现焦点图片随机切换效果的方法

    jquery实现焦点图片随机切换效果的方法

    本文实例讲述了jquery实现焦点图片随机切换效果的方法.分享给大家供大家参考.具体如下: 1. 运行效果如下图所示: 2.完整实例代码点击此处本站下载. 3.完整代码如下: 复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="utf-8">     <title>Slides, A Slideshow Plugin f

  • jQuery实现滚动切换的tab选项卡效果代码

    jQuery实现滚动切换的tab选项卡效果代码

    本文实例讲述了jQuery实现滚动切换的tab选项卡效果代码.分享给大家供大家参考.具体如下: 这里介绍的jquery tab选项卡滚动动态切换代码,似乎很个性的网页选项卡,没有边框的修饰,但十分简约大方,选项卡菜单目前在各大网站很流行,做为前端设计者,能够得心应手的写出一个选项卡是很有必要的哦,希望本代码能为您带去一份参考资料. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-scroll-cha-tab-nav-style-

  • Jquery实现地铁线路指示灯提示牌效果的方法

    本文实例讲述了Jquery实现地铁线路指示灯提示牌效果的方法.分享给大家供大家参考.具体分析如下: 经常做地铁的朋友应该都有所观察吧,就是地铁开动的时候那个绿色的指示灯从一个方向到另一个方向一直来回走,知道到站了才停止运动,我一直都很想做这样的效果.今天细细琢磨下,总算摸到一点头绪了,并且有效果产生了,虽然还有地方优化,先把代码贴出来.不过,注释的地方代码有点问题,到最后一个索引的时候重新重新冲索引0开始添加颜色,但是第二次执行后没有从索引0开始,感兴趣的朋友可以完善一下. 复制代码 代码如下:

  • jQuery实现带滚动线条导航效果的方法

    本文实例讲述了jQuery实现带滚动线条导航效果的方法.分享给大家供大家参考.具体分析如下: 最早见到这种导航是在魅族的官网,当时(去年)觉得挺不错的但自己不会JavaScript,因此那时"可望而不可及".今日去手机QQ for Android官网,又发现类似这样的导航,反正自己也没啥事,所以就尝试用jQuery做出这样的效果. 效果如下: 首页 说说 日志 相册     CSS: body,ul,li{margin:0;padding:0;} #testnav{;height:80

  • jQuery使用fadein方法实现渐出效果实例

    本文实例讲述了jQuery使用fadein方法实现渐出效果的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码通过jQuery的fadein方法控制指定色块逐渐显示的功能 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("

随机推荐