这是第二篇文章，第一篇可以参考Tab页界面，用jQuery及Ajax技术实现代码特点： 1，完全实现Tab逻辑功能，Tab的样式完全交由前端代码控制，很灵活。 2，tab页触发事件是click。 3，界面以table布局，只需要配置关键对象的class和id 即可工作。 复制代码 代码如下: 我的Tabs选项卡 <BR>body {font-size:12px; } <BR>.tab {background:url(images/gray.png); cursor:hand;} <BR> <BR>$(document).ready(function() <BR>{ <BR>//------------------------- <BR>var tabclass = ".tab"; //tab 数组 id <BR>var tabs = ["#tab1", "#tab2", "#tab3"]; //tab 数组 id <BR>var datas = ["#data1", "#data2", "#data3"]; <BR>var tab_selected_bgimg = "images/green.png"; <BR>var tab_unselected_bgimg = "images/gray.png"; <BR>var tab_selected_txtcolor = "#ff6600"; <BR>var tab_unselected_txtcolor = "#666666"; <BR>var curr_index; <BR>$(tabclass).click(function() <BR>{ <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)+1; <BR>} <BR>$(tabs[i]).css("background-image", "url("+ tab_unselected_bgimg +")"); <BR>$(tabs[i]).css("color", tab_unselected_txtcolor); <BR>$(datas[i]).hide(); <BR>} <BR>$(this).css("background-image", "url("+ tab_selected_bgimg +")"); <BR>$(this).css("color", tab_selected_txtcolor); <BR>$("#data"+curr_index).show(); <BR>}); <BR>$("#tab1").click(); <BR>//----------------- <BR>}); <BR> tab1 tab2 tab3 this is data1 this is data2 this is data3 张庆(网眼) 2009-9-21
