快捷導(dǎo)航

JQuery index()方法使用代碼

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

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

學(xué)生科的網(wǎng)站首頁有19個(gè)Repeater控件。6個(gè)div塊的tabs切換。

做tabs切換總不能一個(gè)個(gè)去寫方式吧:(代碼如下....)

$(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方法。查找一個(gè)對(duì)象的某一元素在這個(gè)對(duì)象里的索引值。
官方一個(gè)說明：$('li').index($('#bar'));這里的index參數(shù)用單引號(hào)。在測(cè)試過程中總是失敗。。不知道為什么。后來直接先定義了$(this)所在對(duì)象：var arra=$("#"+ab+" a");。
就可以成功返回索引了。
以下是其中一個(gè)Tabs

復(fù)制代碼代碼如下:

 
<div class="sh_topnew"> 
<div class="w1bg"></div> 
<div id="tabs"> 
<li><div class="w1bg"></div><a href="List.aspx?Uid=185">新聞動(dòng)態(tài)</a><div class="w1bg"></div></li> 
<li><div class="w1bg"></div><a href="List.aspx?Uid=160">團(tuán)學(xué)專題工作</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="團(tuán)干培訓(xùn)通知">[團(tuán)干培訓(xùn)] 團(tuán)干培訓(xùn)通知</a>2010-05-17</li> 
<li><a href="Show.aspx?Uid=193&ID=6392" title="我校團(tuán)委開展學(xué)風(fēng)建設(shè)主體活動(dòng)">[團(tuán)日活動(dòng)] 我校團(tuán)委開展學(xué)風(fēng)建設(shè)主體活動(dòng)</a>2010-05-17</li> 
</ul></div> 
</div> 