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


Posted in Javascript onSeptember 21, 2009

这是第二篇文章,第一篇可以参考
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
Javascript 相关文章推荐
Javascript 错误处理的几种方法
Jun 13 Javascript
jquery操作select详解(取值,设置选中)
Feb 07 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
JavaScript改变CSS样式的方法汇总
May 07 Javascript
跟我学习javascript的call(),apply(),bind()与回调
Nov 16 Javascript
React-Native左右联动List的示例代码
Sep 21 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
对angular 监控数据模型变化的事件方法$watch详解
Oct 09 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
解决vue项目router切换太慢问题
Jul 19 Javascript
Tab页界面,用jQuery及Ajax技术实现
Sep 21 #Javascript
一个js写的日历(代码部分网摘)
Sep 20 #Javascript
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 #Javascript
js表格分页实现代码
Sep 18 #Javascript
ext 同步和异步示例代码
Sep 18 #Javascript
JQuery的ajax基础上的超强GridView展示
Sep 18 #Javascript
jQuery 事件队列调整方法
Sep 18 #Javascript
You might like
肝肠寸断了解下!盘点史上最伤心的十大动漫
2020/03/04 日漫
PHP编程中字符串处理的5个技巧小结
2007/11/13 PHP
php实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
javascript实现TreeView 无刷新展开的实例代码
2013/07/13 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
Kindeditor单独调用多图上传实例
2017/07/31 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
python 随机数使用方法,推导以及字符串,双色球小程序实例
2017/09/12 Python
python实现维吉尼亚算法
2019/03/20 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
Python定义一个Actor任务
2020/07/29 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
材料加工硕士生求职信
2013/10/10 职场文书
房地产管理毕业生自荐信
2013/11/04 职场文书
中专三年学习的个人自我评价
2013/12/12 职场文书
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
餐饮加盟计划书
2014/01/10 职场文书
2014年新生军训方案
2014/05/01 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
写给老师的保证书
2015/05/09 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
2019思想汇报范文
2019/05/21 职场文书
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python