用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检测两个数组是否相似
May 19 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 Javascript
常用原生JS兼容性写法汇总
Apr 27 Javascript
深入浅析JavaScript中with语句的理解
May 12 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 Javascript
js操作数据库实现注册和登陆的简单实例
May 26 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
原生JS实现留言板功能
Feb 08 Javascript
JS函数本身的作用域实例分析
Mar 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
解析PHP中ob_start()函数的用法
2013/06/24 PHP
php实现图片等比例缩放代码
2015/07/23 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
Laravel中使用FormRequest进行表单验证方法及问题汇总
2016/06/19 PHP
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
jQuery实现ichat在线客服插件
2014/12/29 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
学习python (1)
2006/10/31 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
Keras之fit_generator与train_on_batch用法
2020/06/17 Python
python 实现控制鼠标键盘
2020/11/27 Python
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
大学军训自我鉴定
2013/12/15 职场文书
自动化职业生涯规划书范文
2014/01/03 职场文书
职工趣味运动会方案
2014/02/10 职场文书
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
python 实现体质指数BMI计算
2021/05/26 Python
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python