繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用jQuery技术实现Tab页界面之二
- Javascript
- 一个简单的收缩菜单效果
- HTML-CSS群中单选引发的“事件”
- 打开超链需要“确认”对话框的方法
- 用js实现网页上模仿桌面右键菜单
- 可以文本显示的公告栏的js代码
- [原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
- 极致之美：百行代码实现全新智能语言
- 表单(FORM)的一些实用效果代码
- [原创]提供复制本站内容时出现,该文章转自等字样的js代码
- javascript中巧用“闭包”实现程序的暂停执行功能
- 给网站上的广告“加速”显示的方法
- [原创]jser必看的破解javascript各种加密的反向思维方法
- 用javascript代替marquee的滚动字幕效果代码
- 静态页面下用javascript操作ACCESS数据库(读增改删)的代码
- [原创]由亿起发(eqifa.com)的页面发现顶部的http://16a.us/8.js想到的js解密
- [原创]站长必须要知道的javascript广告代码
- js defineSetter -给js的 "class"自动增加一个set的属性(方法)
- Javascript & DHTML 实例编程（教程）（三）初级实例篇1—上传文件控件实例
- WordPress 插件：CoolCode使用方法与下载
- 文档处理系列：随时更新
Javascript 中的 用jQuery技术实现Tab页界面之二
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 336 ::
收藏到网摘: n/a
这个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
评论 (0) All
