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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用jQuery技术实现Tab页界面之二

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 313 ::

收藏到网摘: n/a

Tab页界面，用jQuery及Ajax技术实现通过JS 获取Mouse Position(鼠标坐标)的代码

这个tab页是把数据全部取回来再显示，所以没有数据缓存的特点。但是因为数据全部是显示的html代码，所以对搜索引擎是友好的，也许对seo有好处。这是第二篇文章，第一篇可以参考
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;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> 

张庆(网眼) 2009-9-21

Tab页界面，用jQuery及Ajax技术实现通过JS 获取Mouse Position(鼠标坐标)的代码

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

评论 (0) All

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