用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 相关文章推荐
JS判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
JQuery分屏指示器图片轮换效果实例
May 21 Javascript
javascript委托(Delegate)blur和focus用法实例分析
May 26 Javascript
jquery 表单验证之通过 class验证表单不为空
Nov 02 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
解析AngularJS中get请求URL出现的跨域问题
Dec 01 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
Dec 23 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 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去除html标记的原生函数详解
2015/01/27 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
php foreach如何跳出两层循环(详解)
2016/11/05 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
js Html结构转字符串形式显示代码
2011/11/15 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
python图像常规操作
2017/11/11 Python
Python pandas常用函数详解
2018/02/07 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
keras的三种模型实现与区别说明
2020/07/03 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
求职推荐信
2013/10/28 职场文书
人力资源部培训专员岗位职责
2014/01/02 职场文书
护士自我评价范文
2014/01/25 职场文书
四群教育工作实施方案
2014/03/26 职场文书
创业计划书之废品回收
2019/09/26 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
用Python实现Newton插值法
2021/04/17 Python
Python图像处理之图像拼接
2021/04/28 Python
Java并发编程之详解CyclicBarrier线程同步
2021/06/23 Java/Android
SQL语法CONSTRAINT约束操作详情
2022/01/18 MySQL
Python可视化神器pyecharts绘制水球图
2022/07/07 Python