ajax实现tab面板,用jQuery技术实现Tab页界面之二

这是第二篇文章，第一篇可以参考

Tab页界面，用jQuery及Ajax技术实现

代码特点：

1，完全实现Tab逻辑功能，Tab的样式完全交由前端代码控制，很灵活。

2，tab页触发事件是click。

3，界面以table布局，只需要配置关键对象的class和id 即可工作。

我的Tabs选项卡

body {font-size:12px; }

.tab {background:url(images/gray.png); cursor:hand;}

$(document).ready(function()

{

//-------------------------

var tabclass = ".tab"; //tab 数组 id

var tabs = ["#tab1", "#tab2", "#tab3"]; //tab 数组 id

var datas = ["#data1", "#data2", "#data3"];

var tab_selected_bgimg = "images/green.png";

var tab_unselected_bgimg = "images/gray.png";

var tab_selected_txtcolor = "#ff6600";

var tab_unselected_txtcolor = "#666666";

var curr_index;

$(tabclass).click(function()

{

for(var i=0;i

{

if($(tabs[i]).attr("id")==$(this).attr("id"))

{

curr_index = parseInt(i)+1;

}

$(tabs[i]).css("background-image", "url("+ tab_unselected_bgimg +")");

$(tabs[i]).css("color", tab_unselected_txtcolor);

$(datas[i]).hide();

}

$(this).css("background-image", "url("+ tab_selected_bgimg +")");

$(this).css("color", tab_selected_txtcolor);

$("#data"+curr_index).show();

});

$("#tab1").click();

//-----------------

});

tab1

tab2

tab3

this is data1 this is data2 this is data3

张庆(网眼) 2009-9-21