JQuery index()方法使用代码

2014-07-26  来源:本站原创  分类:jquery  人气:3 

做了很多种方式的选择项卡切换。没有一个确定的方法。程序的魅力就在于一个[结果]有无数种[方式]去实现。

学生科的网站首页有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_tabs a:gt(0),#dbt_r_t_tabs a:gt(0)").addClass("m_out");
$("#tabs a,#tabs2 a,#dbt_l_t_tabs a,#dbt_r_t_tabs a").each(function(){
$(this).mouseover(function(){
if($(this).hasClass("m_out"))
{
var ab=$(this).closest("li").closest("div").attr("id");
var ulid="ul_"+ab;
var arra=$("#"+ab+" a");
var e=arra.index($(this));
$("#"+ab+" a").removeClass("m_on").addClass("m_out");
$(this).removeClass("m_out").addClass("m_on");
$("#"+ulid+" ul").hide();
$("#"+ulid+" ul:eq("+e+")").show();
}
})
})
})

23行赋值使用了JQuery的index方法。查找一个对象的某一元素在这个对象里的索引值。
官方一个说明:$('li').index($('#bar'));这里的index参数用单引号。在测试过程中总是失败。。不知道为什么。后来直接先定义了$(this)所在对象:var arra=$("#"+ab+" a");。
就可以成功返回索引了。
以下是其中一个Tabs

复制代码 代码如下:

<div class="sh_topnew">
<div class="w1bg"></div>
<div id="tabs">
<li><div class="w1bg"></div><a href="List.aspx?Uid=185">新闻动态</a><div class="w1bg"></div></li>
<li><div class="w1bg"></div><a href="List.aspx?Uid=160">团学专题工作</a><div class="w1bg"></div></li>
</div>
<div class="w1bg"></div></div>
<div class="w636">
<div class="w300"><img src="images/222.jpg" /></div>
<div class="w336" id="ul_tabs"><ul></ul><ul class="nodis">
<li><a href="Show.aspx?Uid=194&ID=6393" title="团干培训通知">[团干培训] 团干培训通知</a>2010-05-17</li>
<li><a href="Show.aspx?Uid=193&ID=6392" title="我校团委开展学风建设主体活动">[团日活动] 我校团委开展学风建设主体活动</a>2010-05-17</li>
</ul></div>
</div>
相关文章
  • JQuery index()方法使用代码 2014-07-26

    做了很多种方式的选择项卡切换.没有一个确定的方法.程序的魅力就在于一个[结果]有无数种[方式]去实现. 学生科的网站首页有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"); $(&q

  • 修改或扩展jQuery原生方法的代码实例 2015-02-21

    这篇文章主要介绍了修改或扩展jQuery原生方法的代码实例,本文用一个扩展jquery原生方法val的例子,讲解了如何对jquery原生方法修改或扩展,需要的朋友可以参考下 修改或者扩展jQuery的方法代码实例: 毫无疑问,jQuery是一款功能强大且使用方便的类库. 从它的广泛应用可以证实上面的观点,但是正所谓人无完人,金无足赤,jQuery也是如此,并非在任何时候或者场合都能够完美的完成我们的任务,所以有事以后就需要对jQuery原有的方法进行扩展修改,但是最好方法仍然具有原来的功能. 代

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

    昨天做一个Jqery效果,要获取相应元素的索引值,晕,又忘记了.现在记录下来,以后再次忘记好查怎么获取相应元素的索引值 index([subject])方法,返回值:Number(从0开始计数) index()方法返回指定元素相对于其他指定元素的 index 位置.注释:如果未找到元素,index() 将返回 -1. <html> <head> <script type="text/javascript" src="http://lib.sina

  • jQuery 页面 Mask实现代码 2014-11-05

    何为页面 Mask (遮罩)?看过 jQuery 的 Lightbox 插件的一定不会陌生.就是在页面上建一个透明层遮盖住页面的全部内部. 在 Ajax 应用中,显示一个 Dialog(以 Div 方式显示)前,都会先建一个 Mask.因为经常会用到,所以写成了一个 jQuery 插件,方便自己的使用. (function($){ $.extend({ documentMask: function(options){ // 扩展参数 var op = $.extend({ opacity: 0.

  • jQuery中index()方法用法实例 2014-12-06

    这篇文章主要介绍了jQuery中index()方法用法,实例分析了index()方法返回索引值的几种常见使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jQuery中index()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以搜索匹配元素,并返回元素的索引值. 索引值是从0开始的. 语法结构一: 当此方法没有参数的时候,返回值是指定元素在其同辈元素集合中的索引位置. $(selector).index() 实例代码: 实例一: 复制代码 代码如下: <!DOCTY

  • jquery focus(fn),blur(fn)方法实例代码 2013-10-23

    jquery focus(fn),blur(fn)方法实例代码,需要的朋友可以参考下. 首先建一个CSS样式表 .highlight{border: 1px solid #EFA100;outline: 2px solid #FFDC97;} 然后增加如下代码 <script type ="text/javascript" language ="javascript"> $(document).ready(function(){ $("inpu

  • jquery的index方法实现tab效果 2014-05-12

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

  • JQuery显示隐藏DIV的方法及代码实例 2014-08-27

    这篇文章主要介绍了JQuery显示隐藏DIV的方法及代码实例,本文讲解了载入时隐藏.动态隐藏和显示两部分内容,需要的朋友可以参考下 1. 如果在载入是隐藏: <head> <script language="javascript"> function HideWeekMonth() { $("#tt1").hide(); $("#tt2").hide(); } </script> </head> &

  • JQuery下的Live方法和$.browser方法使用代码 2013-11-30

    网站做好了,老师却要求要3级菜单,无奈只好去做3级菜单了.这次3级菜单的思路是在原有不变的基础上,对有3级菜单的ID,选择进入新的一个控件.在这个新的控件里用ajax去请求其3级目录里的东西. $(function(){ Ajaxload("?Uid=1<%= Yan.GET_Dict(id, 8, TableName)%>") $("#ThreeM a:first").addClass("addBg"); $(".page

  • jquery append()方法与html()方法的区别及使用介绍 2014-04-18

    append()方法在被选元素的结尾插入指定内容,html()方法返回或设置被选元素的内容,下面为大家介绍下两者的区别及使用 append(content):方法在被选元素的结尾(仍然在内部)插入指定内容,有很多朋友觉得append与html差不多,其它从英文意义上append是在原有基础上增加,而html中是替换当前所有内容. 定义和用法 append() 方法在被选元素的结尾(仍然在内部)插入指定内容. $(selector).append(content) 使用函数来附加内容 使用函数在指

  • jQuery.holdReady()方法用法实例 2013-10-03

    这篇文章主要介绍了jQuery.holdReady()方法用法,以实例形式分析了holdReady()方法在暂停或者恢复jQuery.ready()事件的使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jQuery.holdReady()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以暂停或者恢复jQuery.ready()事件. 调用此方法可以延迟jQuery的ready事件,也就是说尽管文档已经加载完成,也不会执行ready事件处理方法. 可以多次调用jQue

  • jQuery遍历Form示例代码 2013-11-26

    取得id为form1的form的所有输入变量,然后使用for循环进行数组遍历,具体实现如下,感兴趣的朋友可以参考下 jQuery 遍历 Form,代码如下 <script type="text/javascript"> // 取得 id 为form1 的 form 的所有输入变量 values = $("#form1").serializeArray(); var values, index; for (index = 0; index < val

  • Jquery 扩展方法 2013-12-02

    好久没有温习JS了. 最近看到VS2010把Jquery作为JS标准库纳入了Web项目里,再不会用Jquery,真怕自己"OUT"了. 网上搜索了信息在编写JQUERY扩展方法有两种,一种是使用jquery.fn.extend,一种是jquery.extend. jquery.fn表示jquery.prototype,,给jquery对象添加方法.刚好用到扩展方法,并且使用jquery.fn,这里就写下jquery.fn的用法,这些网上很多,蛮写蛮写 比如当点击 button时弹出一个

  • 用JQUERY增删元素的代码 2014-01-21

    用JQUERY增删元素的代码,需要的朋友可以参考下 用JQUERY增删元素 JQuery有增加和删除元素的方法. 主要分为内部插入,外部插入,包裹,替换,删除. 内部插入主要方法: append(content) 向每个匹配的元素内部追加内容. prepend(content) 向每个匹配的元素内部前置内容. 外部插入: after(content) 在每个匹配的元素之后插入内容. before(content) 在每个匹配的元素之前插入内容. 删除: empty() 删除匹配的元素集合中所有的

  • jQuery Clone Bug解决代码 2014-01-22

    jQuery Clone Bug解决代码,具体看测试代码. 首先,jQuery事件绑定的时候,所有事件用$.data()方法存储到了$.cache里面,用data('events')可以反复获取到它们: var $div = $('div.demo'), data = $div.data(); // 获取所有绑定事件: var events = data.events; // 除了window对象绑定事件的比较特殊: var windowEvents = $(window).data('__ev

  • jquery.Ajax()方法调用Asp.Net后台的方法解析 2014-02-05

    本篇文章主要是对jquery.Ajax()方法调用Asp.Net后台的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. 先来个简单的实例热热身吧. 1.无参数的方法调用asp.net code: using System.Web.Script.Services; [WebMethod] public static string SayHello() { return "Hello Ajax!";

  • jQuery $.data()方法使用注意细节 2014-02-19

    前段时间同事在群里对jQuery里的.data()方法大发牢骚,接下来介绍jQuery $.data()方法使用注意细节,需要了解的朋友可以参考下 前段时间同事在群里对jQuery里的.data()方法大发牢骚: XXX(NNNNNNN) 15:11:34 <a id="a" data-xxx="00123" /> alert($('#a').data('xxx'));//123 data方法不靠谱 XXX(NNNNNNN) 15:13:17 老老实实用

  • Jquery getJSON方法详细分析 2014-03-09

    本篇文章主要是对Jquery getJSON方法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 准备工作 ·Customer类 public class Customer { public int Unid { get; set; } public string CustomerName { get; set; } public string Memo { get; set; } public string Other { get; set; } } ·服务端处理(Json_

  • jQuery CSS()方法改变现有的CSS样式表 2014-04-01

    使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性,比如要改变链接颜色,如果需要改变多个样式属性,可先定义属性变量,然后直接赋值给css()方法 使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性.其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号分隔.比如要改变链接颜色,可以这样编写代码: $("#61dh a").css('color','#123456'); //选择器'$("#61dh a")'表示

  • jQuery Ajax()方法使用指南 2014-04-09

    jQuery.ajax()功能比较强大,可配置的参数比较多,本文主要对这个方法的注意事项进行总结.有相同需求的童鞋们也来仔细看看吧,希望对大家能有所帮助 jQuery提供了简单而强大的选择器功能,同时对Ajax操作也给出了很好的支持.在Ajax方面,jQuery除了提供底层的jQuery.ajax()方法外,也提供了下面的简单方法: (1) jQuery.get(url, [data], [callback], [type]) (2) jQuery.getJSON(url, [data], [c