用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 相关文章推荐
jQuery 树形结构的选择器
Feb 15 Javascript
javascript中将Object转换为String函数代码 (json str)
Apr 29 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
Dec 21 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 Javascript
基于jquery二维码生成插件qrcode
Jan 07 Javascript
微信小程序之发送短信倒计时功能
Aug 30 Javascript
Vue项目数据动态过滤实践及实现思路
Sep 11 Javascript
JS如何在不同平台实现多语言方式
Jul 16 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
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
简介JavaScript中的unshift()方法的使用
2015/06/09 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
js学习心得_一个简单的动画库封装tween.js
2017/07/14 Javascript
vue 引入公共css文件的简单方法(推荐)
2018/01/20 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
修改vue+webpack run build的路径方法
2018/09/01 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
python编程开发之日期操作实例分析
2015/11/13 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
Python连接Mssql基础教程之Python库pymssql
2018/09/16 Python
老生常谈python中的重载
2018/11/11 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
Python实现钉钉订阅消息功能
2020/01/14 Python
python中安装django模块的方法
2020/03/12 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
世界上最全面的草药补充剂和顶级品牌维生素网站:HerbsPro
2019/01/20 全球购物
专业幼师实习生自我鉴定范文
2013/12/08 职场文书
教导处工作制度
2014/01/18 职场文书
考试没考好检讨书
2014/01/31 职场文书
小学班主任事迹材料
2014/12/17 职场文书
无保留意见审计报告
2015/06/05 职场文书
浅谈Vue的computed计算属性
2022/03/21 Vue.js
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers