(一)在HTML页面中实现一个简单的Tab

在HTML页面中实现一个简单的Tab

     为了充分利用有限的HTML页面空间，经常会采用类似与TabControl的效果通过切换来显示更多的内容。本文将采用一种最为简单的方法来实现类似如Tab页切换的效果。

Tab特点

  1. 每个页签由标题区和内容区组成
  2. 内容区和标题一一对应
  3. 至少有两组页签以便可以切换
  4. 所有页签只有两种状态：选中和未选中，页面载入后默认显示第一个
  5. 选中页签(当前页签)只有一个并突出高亮显示
  6. 鼠标点击或移上时切换

     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>
<title>Tab页切换</title>
<script src="javascript/JScript.js" type="text/javascript"></script>
<link href="css/css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table class="tabTitlesContainer">
<tr id="tabTitles">
<td class="tabTitleSelected" onclick="tabPageControl(0)">DIV</td>
<td class="tabTitleUnSelected" onclick="tabPageControl(1)">CSS</td>
<td class="tabTitleUnSelected" onclick="tabPageControl(2)">JavaScript</td>
</tr>
</table>
<table id="tabPagesContainer">
<tbody class="tabPageSelected">
<tr class="tabPage">
<td>HTML的DIV控件是其他控件的容器。当要以编程方式生成控件、隐藏/显示一组控件或本地化一组控件时，该控件尤其有用。</td>
</tr>
</tbody>
<tbody class="tabPageUnSelected">
<tr class="tabPage">
<td>级联样式表 (CSS) 包含应用于网页中的元素的样式规则。这些样式定义元素的显示方式以及元素在页面中的放置位置</a></td>
</tr>
</tbody>
<tbody class="tabPageUnSelected">
<tr class="tabPage">
<td>Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。</td>
</tr>
</tbody>
</table>
</body>
</html>

 

     简单的JavaScript代码如下：
function tabPageControl(n)
{
for (var i = 0; i < tabTitles.cells.length; i++)
{
tabTitles.cells[i].className = "tabTitleUnSelected";
}
tabTitles.cells[n].className = "tabTitleSelected";

for (var i = 0; i < tabPagesContainer.tBodies.length; i++)
{
tabPagesContainer.tBodies[i].className = "tabPageUnSelected";
}
tabPagesContainer.tBodies[n].className = "tabPageSelected";
}

 

     简单的CSS代码如下：

body{text-align:center;}
.tabTitlesContainer{text-align:center;font-size:small;cursor:hand;width:300px;border-width:thin;}
.tabTitleUnSelected{width:100px;}
.tabTitleUnSelected:hover{background-color:Orange;}
.tabTitleSelected{background-color:Gray;width:100px;}
#tabPagesContainer{text-align:left;font-size:small;font-size:small;width:300px;}
.tabPageUnSelected{background-color:Orange;display: none;}
.tabPageSelected{background-color: Orange;display:block;}
.tabPage{height:80px;}

 

     大家可以照着上述的代码，做出最终的运行效果。

posted @ 2015-04-23 14:53  左魅颜  阅读(1627)  评论(0)  编辑  收藏  举报