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 相关文章推荐
js右键菜单效果代码
Jul 21 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
May 27 Javascript
jquery 新浪网易的评论块制作
Jul 01 Javascript
使用jquery实现div的tab切换实例代码
May 27 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
Aug 01 Javascript
node.js入门学习之url模块
Feb 25 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
在vue项目中,使用axios跨域处理
Mar 07 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 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
PHP整合七牛实现上传文件
2015/07/03 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
2006/10/17 Javascript
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
jQuery 获取URL参数的插件
2010/03/04 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
js四舍五入数学函数round使用实例
2014/05/09 Javascript
jQuery实现倒计时按钮功能代码分享
2014/09/03 Javascript
js数组依据下标删除元素
2015/04/14 Javascript
初步使用bootstrap快速创建页面
2016/03/03 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
2016/03/18 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
jQuery实现简单的tab标签页效果
2016/09/12 Javascript
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
jQuery实现的页面弹幕效果【测试可用】
2018/08/17 jQuery
swiper4实现移动端导航切换
2020/10/16 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
python之super的使用小结
2018/08/13 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
美的官方商城:Midea
2016/09/14 全球购物
文化产业实施方案
2014/06/07 职场文书
预防传染病方案
2014/06/14 职场文书
上海世博会口号
2014/06/19 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
幼儿园辞职书
2015/02/26 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js