用jQuery技术实现Tab页界面之二
更新时间：2009年09月21日 17:16:55 作者：
这个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
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
您可能感兴趣的文章:
- 通过jquery实现tab标签浏览效果
- JQuery学习笔记 实现图片翻转效果和TAB标签切换效果
- jquery tools之tabs 选项卡/页签
- jquery easyui的tabs使用时的问题
- JQuery Tab选项卡效果代码改进版
- jQuery EasyUI 中文API Layout(Tabs)
- 用jQuery打造TabPanel效果代码
- 基于JQuery的6个Tab选项卡插件
- 基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
- jQuery版Tab标签切换
- jQuery Tab插件 用于在Tab中显示iframe，附源码和详细说明
- jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
- 基于jquery tab切换(防止页面刷新)
- 基于jquery的图片轮播 tab切换组件
- 使用jquery实现div的tab切换实例代码
- jquery sortable的拖动方法示例详解
- jQuery操作表格（table）的常用方法、技巧汇总
- jquery easyui 结合jsp简单展现table数据示例
- jQuery插件slick实现响应式移动端幻灯片图片切换特效
- jquery移动端TAB触屏切换实现效果
相关文章
这篇文章主要为大家详细介绍了多种jQuery绑定事件的实现方式，分享了jQuery防止重复绑定事件的解决方法，感兴趣的小伙伴们可以参考一下2016-06-06
这篇文章主要介绍了jQuery中removeClass()方法用法,实例分析了removeClass()方法的功能、定义及从匹配元素删除一个或多个类的使用技巧,需要的朋友可以参考下2015-01-01
这篇文章主要为大家详细介绍了jQuery实现推拉门效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
这篇文章主要介绍了jQuery 常用特效,结合实例形式总结分析了jquery显示与隐藏、淡入淡出、滑动、动画等常用特效实现技巧,需要的朋友可以参考下2020-05-05
这篇文章主要为大家详细介绍了基于jQuery实现Tabs选项卡自定义插件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要介绍了jQuery简单获取键盘事件的方法,涉及jQuery针对键盘事件的获取与响应技巧,需要的朋友可以参考下2016-01-01
这篇文章主要介绍了JQuery实现动态适时改变字体颜色的方法,实例分析了jQuery操作鼠标事件及颜色的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
这篇文章主要为大家详细介绍了jquery插件实现图片悬浮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
下面小编就为大家带来一篇JQuery点击行tr实现checkBox选中的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要介绍了jquery判断单选按钮radio是否选中的方法,实例分析了加载页面时获取单选按钮ID和点击按钮时获取单选按钮ID两种方法,非常简单实用,需要的朋友可以参考下2015-05-05
最新评论