网上的Tab页代码很多,实现也大同小异 ,但代码都显得凌乱,若要真的用的话,必须费劲的吃透它,才能进行二次定制开发,为我所用。实际上实现这个Tab页界面非常简单,仅仅是通过Ajax技术偷偷的获取信息,然后在一块区域轮流显示而已(通过显示和隐藏层,或复用一个层,轮流向里边填充Html数据)。 自己的开发的代码自己最清楚,用起来也应该最顺手,要扩展的话脑子也不犯晕。代码如下,还在不断修改中。 代码如下: 复制代码 代码如下: -//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> 我的Tabs选项卡(Ajax版本) <BR>body {font-size:12px; } <BR>#tab0,#tab1,#tab2 {background:url(images/gray.png); cursor:hand;} <BR> <BR>$(document).ready(function() <BR>{ <BR>//————————- <BR>//tabs 配置信息 <BR>var tabs = [”#tab0″, “#tab1″, “#tab2″]; //tab 数组 id <BR>var datas = “#div_data”; //显示区对象的id号 <BR>var event_type = “mouseover”; //触发事件(click/dblclick/mouseover/focus/…) <BR>var default_tab = “#tab0″; <BR>//切换图片 <BR>var tab_selected_bgimg = “images/green.png”; <BR>var tab_unselected_bgimg = “images/gray.png”; <BR>//切换文本颜色 <BR>var tab_selected_txtcolor = “#ff6600″; <BR>var tab_unselected_txtcolor = “#666666″; <BR>// <BR>urls = [ <BR>“my_ajax_server.php?app=tab0″, <BR>“my_ajax_server.php?app=tab1″, <BR>“my_ajax_server.php?app=tab2″, <BR>] <BR>//**Begin:固定代码********************************* <BR>for (var i=0; i<tabs.length; i++) <BR>{ <BR>$(tabs[i]).bind(event_type, handler); <BR>} <BR>$(default_tab).trigger(event_type); <BR>// <BR>function handler() <BR>{ <BR>//初始化缓存数组 <BR>var localdatas = new Array(); //缓存浏览器本次数据 <BR>for (var i=0; i<tabs.length; i++) <BR>{ <BR>localdatas[i]=”; <BR>} <BR>//重置所有tabs <BR>for (var i=0; i<tabs.length; i++) <BR>{ <BR>$(tabs[i]).css(”background-image”, “url(”+ tab_unselected_bgimg +”)”); <BR>$(tabs[i]).css(”color”, tab_unselected_txtcolor); <BR>} <BR>var curr_index; <BR>for(var i=0;i<tabs.length;i++) <BR>{ <BR>if($(tabs[i]).attr(”id”)==$(this).attr(”id”)) <BR>{ <BR>curr_index = parseInt(i); <BR>} <BR>} <BR>// <BR>$(this).css(”background-image”, “url(”+ tab_selected_bgimg +”)”); <BR>$(this).css(”color”, tab_selected_txtcolor); <BR>if(localdatas[curr_index]==”) <BR>{ <BR>//ajax获取数据(默认method=get) <BR>$.ajax <BR>({ <BR>url: urls[curr_index], //后台处理程序 <BR>cache: false, <BR>timeout: 20000, <BR>error:function() <BR>{ <BR>alert(”error while submitting”); <BR>}, <BR>success:function(data) <BR>{ <BR>localdatas[curr_index] = data; //缓存浏览器本次数据 <BR>$(datas).html(data); <BR>} <BR>}); <BR>} <BR>else <BR>{ //显示缓存数据 <BR>$(datas).html(datas[curr_index]); <BR>} <BR>} <BR>//**End:固定代码********************************* <BR>//—————– <BR>}); <BR> tab0 tab1 tab2 my_ajax_server.php文件: 代码如下: 复制代码 代码如下: /******************************************* * File: my_ajax_server.php ********************************************/ error_reporting(7); set_magic_quotes_runtime(0); $app = $_GET['app']; switch ($app) { case “tab0″: // ?> from TAB0 break; case “tab1″: // ?> from TAB1 break; case “tab2″: // ?> from TAB2 break; default: echo ‘my_ajax_server.php error.'; break; } ?>