學生科的網站首頁有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>