Tab页界面之二，jQuery技术实现

　2009-10-24 11:18:00　来源：WEB开发网　闂傚倷绶氬ḿ褍螞閹绢喖绠柨鐕傛嫹

闂傚倷绀侀幉锟犲垂閻㈠灚宕查柟鎵閸庡秵銇勯幒鎴濃偓鐢稿磻閹炬枼妲堟繛鍡楃С濞岊亞绱撻崒姘扁枌闁瑰嚖鎷�

婵犵數濮幏鍐川椤撴繄鎹曢梻渚€娼уú銈吤洪妸鈺佺劦妞ゆ帊鑳堕埊鏇㈡煏閸モ晛浠х紒杈╁仱閺佹捇鏁撻敓锟�闂傚倷绶氬ḿ褍螞閹绢喖绠柨鐕傛嫹　　闂傚倷鑳舵灙缂佺粯顨呴埢宥夊即閵忕姵鐎梺缁樺姈椤愮厧鈽夊Ο閿嬬€婚梺褰掑亰閸撴稑鈻斿鑸碘拺闁告稑饪村▓鏃€绻涚仦鍌氬闁崇粯鎹囬獮瀣攽閹邦剚顔傛俊鐐€栧濠氬储瑜忛幉鎾晸閿燂拷

核心提示： 这个tab页是把数据全部取回来再显示，所以没有数据缓存的特点，Tab页界面之二，jQuery技术实现，但是因为数据全部是显示的html代码，所以对搜索引擎是友好的， 3，界面以table布局，也许对SEO有好处，代码特点： 1

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

　代码特点：
　 1，完全实现Tab逻辑功能，Tab的样式完全交由前端代码控制，很灵活。
　 2，tab页触发事件是click。
　 3，界面以table布局，只需要配置关键对象的class和id 即可工作。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>我的Tabs选项卡</title>
<style type=”text/CSS”>
body {font-size:12px; }
.tab {background:url(images/gray.png); cursor:hand;}
</style>
<script type=”text/javascript” src=”jquery/jquery-1.2.6.min.js” mce_src=”jquery/jquery-1.2.6.min.js”></script>
<script type=”text/Javascript”>
$(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();
//—————–
});