在HTML页面中实现一个简单的Tab_摆渡者

http://blog.sina.com.cn/u/1825354083

首页博文目录关于我

个人资料

微博

加好友发纸条

写留言加关注

博客等级：
博客积分：

博客访问：
关注人气：
获赠金笔：0支
赠出金笔：0支
荣誉徽章：

正文字体大小：大中小

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

(2009-10-13 23:47:00)

标签：

杂谈

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

HTML的设计视图类似如下图：

https://nvenpq.blu.livefilestore.com/y1mLz3CSaVm28W9tdDCkqpVKquhNWBLAESBJLXd1wUIGmooZJ6KuEc8IhYeJDJR2kVlzMXjRjaHKza_8t_PVLU1pvJQ73-tfu0hWaZ_XDrrUjbeE6xyQ2ecU6nadGSU_61W6D5lzoBU4DqT-MZuwbIaHQ/image_thumb[1]%2020BE9F19.png

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{background-color:Silver;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;}

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

http://simg.vdoing.com/m/67481/x01.gif?noscript

摆渡者Ferrymen

阅读┊ 收藏 ┊ 喜欢 ▼ ┊打印┊举报/Report

前一篇：固定ASP .NET Development Server的端口号

后一篇：【转】CSS中id与class的使用原则

新浪BLOG意见反馈留言板　欢迎批评指正