JQuery index()方法使用代碼

更新時間：2010年06月02日 03:01:21 作者：

做了很多種方式的選擇項卡切換。沒有一個確定的方法。程序的魅力就在于一個[結(jié)果]有無數(shù)種[方式]去實現(xiàn)。

學生科的網(wǎng)站首頁有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參數(shù)用單引號。在測試過程中總是失敗。。不知道為什么。后來直接先定義了$(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">新聞動態(tài)</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

jquery實現(xiàn)的V字形顯示效果代碼
這篇文章主要介紹了jquery實現(xiàn)的V字形顯示效果代碼,涉及jQuery數(shù)學運算及樣式操作的相關技巧,需要的朋友可以參考下
2015-10-10
Jquery 綁定時間實現(xiàn)代碼
jquery 顯示本地時間/ 帶日期、星期/ UTC，需要的朋友可以參考下。
2011-05-05
翻譯整理的jQuery使用查詢手冊
翻譯整理的jQuery使用查詢手冊...
2007-03-03
jquery組件WebUploader文件上傳用法詳解
這篇文章主要為大家詳細介紹了jquery組件WebUploader文件上傳用法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-11-11
jQuery中bind與live的用法及區(qū)別小結(jié)
本篇文章主要是對jQuery中bind與live的用法以及區(qū)別進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-01-01
在myeclipse中如何加入jquery代碼提示功能
這篇文章主要介紹了在myeclipse中如何加入jquery代碼提示功能,需要的朋友可以參考下
2014-06-06
jquery的ajax異步請求接收返回json數(shù)據(jù)實例
jquery的ajax異步請求接收返回json數(shù)據(jù)方法設置簡單，一個是服務器處理程序是返回json數(shù)據(jù)，另一種就是ajax發(fā)送設置的datatype設置為jsonp格式數(shù)據(jù)或json格式都可以。這篇文章對此進行了實例介紹,需要的朋友可以參考下
2014-06-06
淺談jQuery綁定事件會疊加的解決方法和心得總結(jié)
下面小編就為大家?guī)硪黄獪\談jQuery綁定事件會疊加的解決方法和心得總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-10-10
jQuery1.3.2 升級到jQuery1.4.4需要修改的地方
jQuery1.3.2 升級到 1.4.4 ，需要修改的地方，需要的朋友可以參考下。
2011-01-01
jquery觸發(fā)a標簽跳轉(zhuǎn)事件示例代碼
本文為大家詳細介紹下如何使用jquery觸發(fā)a標簽的跳轉(zhuǎn)事件，感興趣的朋友可以參考下哈，希望對大家有所幫助
2013-07-07