Tab页界面之二,用jQuery技术实现
来源:互联网 发布:那个软件抢火车票最快 编辑:程序博客网 时间:2024/05/20 14:18
这个tab页是把数据全部取回来再显示,所以没有数据缓存的特点。但是因为数据全部是显示的html代码,所以对搜索引擎是友好的,也许对seo有好处。
代码特点:
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-20
来自“网眼视界”:http://blog.why100000.com
“十万个为什么”电脑学习网:http://www.why100000.com
- Tab页界面之二,用jQuery技术实现
- Tab页界面之二,用jQuery技术实现
- Tab页界面,用jQuery及Ajax技术实现
- Tab页界面,用jQuery及Ajax技术实现
- jQuery EasyUi实现tab页
- jQuery EasyUi实现tab页
- 用ViewPager实现主界面Tab
- Tab实现之Fragment(二)
- jquery实现点击一个tab页,填充整个表单。点击出现事件(二)。
- 使用jQuery实现Tab页效果
- 选项卡tab页jquery实现
- jquery tab页切换简单实现
- Jquery实例-Tab页的实现
- 用jquery实现Tab切换菜单
- 用jQuery实现简单的tab切换
- Jquery实现Tab效果
- jquery 实现tab切换
- jquery实现tab栏
- [转]C++,VC++,MFC,ATL,WTL到底是什么关系么
- 写给大四即将找工作的同学
- 10月24日3G手机(Android/iPhone)高级技术讲座(北京)
- [转]CMS Content Management System(内容管理系统) 提供商
- JAVA Applet教程-如何在Applet中引用jar中的资源文件 作者:admin
- Tab页界面之二,用jQuery技术实现
- 试试再说(9.23)
- 线性查找和折半查找
- 小小标记
- C++编程思想(卷二):异常处理
- first
- 转贴【笑话】
- 浙江大学校长杨卫院士谈大学导师“十大戒”(1)
- 线性代数笔记(4):行列式(determinant)