Tab页界面之二，jQuery技术实现-白红宇

这个tab页是把数据全部取回来再显示，所以没有数据缓存的特点。但是因为数据全部是显示的html代码，所以对搜索引擎是友好的，也许对seo有好处。

代码特点：

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

2，tab页触发事件是click。

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

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ““>

<head>

<title>我的Tabs选项卡</title>

body {font-size:12px; }

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

</style>

$(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<tabs.length;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();

//—————–

});

</script>

</head>

<body>

<tr>

</tr>

</table>

<tr>

<td>

this is data1

</div>

this is data2

</div>

this is data3

</div>

</td>

</tr>

</table>

</body>

本文转自网眼51CTO博客，原文链接：http://blog.51cto.com/itwatch/286441，如需转载请自行联系原作者