管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

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

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

　　代码特点：

　　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">

　　<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>

　　张庆(网眼) 2009-9-21

教程首页更多教程