用jQuery技术实现Tab页界面之二
2016-02-19 15:08
在这个颜值当道，屌丝闪边的时代，拼不过颜值拼内涵，只有知识丰富才能提升一个人的内在气质和修养，所谓人丑就要多学习，今天图老师给大家分享用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"
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"/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;itabs.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
table border="0" width="500" height="25" border="0" align="center" cellpadding="0" cellspacing="0"
tr
td width="97" class="tab" id="tab1"tab1/td
td width="30"/td
td width="97" class="tab" id="tab2"tab2/td
td width="30"/td
td width="97" class="tab" id="tab3"tab3/td
td width="149"/td
/tr
/table
table border="1" width="500" height="60" border="0" align="center" cellpadding="0" cellspacing="0"
tr
td
div id="data1"
this is data1
/div
div id="data2"
this is data2
/div
div id="data3"
this is data3
/div
/td
/tr
/table
/body
张庆(网眼) 2009-9-21
