您的位置：首页 > Web前端 > JQuery

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

2009-09-20 19:38 519 查看

这个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();

//—————–

});

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 技术休闲界面 jQuery Tab

相关文章推荐

新的分享

章节导航