JQuery index()方法使用代码


Posted in Javascript onJune 02, 2010

学生科的网站首页有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>
Javascript 相关文章推荐
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 Javascript
js更优雅的兼容
Aug 12 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
Mar 01 Javascript
javascript闭包的理解
Apr 01 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
JavaScript必知必会(九)function 说起 闭包问题
Jun 08 Javascript
AngularJS ng-controller 指令简单实例
Aug 01 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
vue组件中的数据传递方法
May 14 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 Javascript
vue router返回到指定的路由的场景分析
Nov 10 Javascript
JQuery下的Live方法和$.browser方法使用代码
Jun 02 #Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 #Javascript
一些经常会用到的Javascript检测函数
May 31 #Javascript
jquery URL参数判断,确定菜单样式
May 31 #Javascript
javascript 全等号运算符使用说明
May 31 #Javascript
js的逻辑运算符 ||
May 31 #Javascript
避免 showModalDialog 弹出新窗体的原因分析
May 31 #Javascript
You might like
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
php的urlencode()URL编码函数浅析
2011/08/09 PHP
php smarty模板引擎的6个小技巧
2014/04/24 PHP
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
2016/09/28 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
python多进程操作实例
2014/11/21 Python
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
Python序列循环移位的3种方法推荐
2018/04/09 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
python-Web-flask-视图内容和模板知识点西宁街
2019/08/23 Python
python 命令行传入参数实现解析
2019/08/30 Python
django orm模块中的 is_delete用法
2020/05/20 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
介绍一下内联、左联、右联
2013/12/31 面试题
自荐书格式
2013/12/01 职场文书
创业计划书如何吸引他人眼球
2014/01/10 职场文书
创建精神文明单位实施方案
2014/03/08 职场文书
道路建设实施方案
2014/03/18 职场文书
工作求职信
2014/07/04 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书