简单实现选项卡例子
来源：互联网 发布：怎么开淘宝找货源 编辑：程序博客网 时间：2024/04/29 08:50
通常使用DIV+CSS+javascript实现选项卡，这里我用table+css+javascript ,原理一样
其实复杂的DIV+CSS+js的应用都差不多，只要把简单的原理弄清楚了，在难的应用也不过如此
说正题：
背景：利用 table+CSS+Javascript实现选项卡功能
原理：利用 js操作控制Table的隐藏和呈现，以及js控制相关样式，实现更好的用户体验
步骤：
1。test.html页面（本文重点在弄清原理，所以例子相当简单）
<!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=gb2312" />
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" rev="stylesheet" href="test.css" />
<script src="test.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<form action="" method="get">
<table width="200" border="1">
<tr>
<td id="td3" colspan="3" onclick="zhedie()">折叠</td>
</tr>
<tr>
<td onclick="change(0)" id="td1" class="tyes">区域A</td>
<td onclick="change(1)" id="td2">区域B</td>
</tr>
<tr>
<td colspan="2">
<table width="100%" border="1" id="table1">
<tr>
<td>aaaaa</td>
</tr>
<tr>
<td>aaaa</td>
</tr>
</table>
<table width="100%" border="1" id="table2" style="display:none">
<tr>
<td>bbbb</td>
</tr>
<tr>
<td>bbbb</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
2.javascript代码 test.js文件
function change(n)
{
if(n==0)
{
table1.style.display="block";
td1.className="tyes";
table2.style.display="none";
td2.className="tno";
}
else
{
table2.style.display="block";
td2.className="tyes";
table1.style.display="none";
td1.className="tno";
}
}
function zhedie()
{
if(td1.style.display=="none")
{
td1.style.display="block";
td2.style.display="block";
table1.style.display="block";
table2.style.display="block";
}
else
{
td1.style.display="none";
td2.style.display="none";
table1.style.display="none";
table2.style.display="none";
}
}
3。css样式文件 test.css
function change(n)
{
if(n==0)
{
table1.style.display="block";
td1.className="tyes";
table2.style.display="none";
td2.className="tno";
}
else
{
table2.style.display="block";
td2.className="tyes";
table1.style.display="none";
td1.className="tno";
}
}
function zhedie()
{
if(td1.style.display=="none")
{
td1.style.display="block";
td2.style.display="block";
table1.style.display="block";
table2.style.display="block";
}
else
{
td1.style.display="none";
td2.style.display="none";
table1.style.display="none";
table2.style.display="none";
}
}
好了，就这么简单，实现了选项卡的功能，在复杂的应用也不过如此
- 简单实现选项卡例子
- 简单实现选项卡例子
- jQuery实现简单选项卡
- 简单js实现选项卡
- jq实现简单选项卡
- 简单的选项卡功能实现
- 实现一个简单的tab选项卡
- Javascript实现简单的选项卡
- jquery 实现简单tab选项卡效果
- RadioGroup+Fragment 实现简单选项卡切换
- jquery实现简单的选项卡功能
- js实现简单的选项卡功能
- jquery简单实现tab选项卡效果
- javascript实现简单的tab选项卡
- javascript实现-最简单选项卡切换
- 一个简单ＨＴＭＬ实现一个选项卡
- jquery简单实现tab选项卡效果
- 简单实现网页选项卡功能
- 即兴创意、情动流泪大奖揭晓！zuzong 与 gxlgp 夺魁！"每逢佳节倍思亲" 祝大家中秋甜蜜, 月饼快乐! ：－）
- 给GridView分页的页码添加事件
- 从别人设计的系统看自己应该注意什么
- [转]C语言语法小结
- Girdview实现滚动条效果，并且Head部分不滚动
- 简单实现选项卡例子
- Apache Ant 中文手册
- spring事务管理全解析
- C#箴言：用静态构造函数初始化静态成员
- 在VMware Server和Red Hat Enterprise Linux 5上安装VMware Tools
- 通过存储过程实现分页
- Java 版本的 Sprintf 字符串格式化函数
- smarty实例(二)
- 图像二值化 (C#)
