转载自: 纯DIV+CSS简单实现Tab选项卡左右切换效果 | 赣南剑客，稍微有点修改。


<!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>CSS_Tab简洁版</title>
<style type="text/css">
    <style type="text/css">
        body {
            margin: 0;
            font-size: 12px;
            background: #666;
        }
        #box {
            width: 400px;
            height: 300px;
            margin: 100px auto 0;
        }
        #tab_nav {
            margin: 0;
            padding: 0;
            height: 25px;
            line-height: 24px;
        }
        #tab_nav li {
            float: left;
            margin: 0 3px;
            list-style: none;
            border: 1px solid #999;
            border-bottom: none;
            height: 24px;
            width: 60px;
            text-align: center;
            background: #FFF;
        }
        a {
            font: bold 14px/24px "微软雅黑", Verdana, Arial,
                  Helvetica,sans-serif;
            color: green;
            text-decoration: none;
        }
        a:hover {
            color: red;
        }
        #tab_content {
            width: 550px;
            height: 450px;
            border: 1px solid #999;
            font: bold 4em/273px "微软雅黑", Verdana, Arial,
                  Helvetica,sans-serif;
            text-align: center;
            background: #FFF;
            overflow: hidden;
        }
        #t_1,#t_2,#t_3 {
            width: 100%;
            height: 450px;
        }
    </style>
</head>
<body>
<div id="box">
    <ul id="tab_nav">
        <li><a href="#t_1">tab_1</a></li>
        <li><a href="#t_2">tab_2</a></li>
        <li><a href="#t_3">tab_3</a></li>
    </ul>
    <div id="tab_content">
        <div id="t_1">tab_1</div>
        <div id="t_2">tab_2</div>
        <div id="t_3">tab_3</div>
    </div>
</div>
</body>
</html>

注：1）通过#tab_nav li样式中的float: left实现tab_1,tab_2,tab_3排列到一行;

     2）通过标签<a>实现tab_1等的点击功能，通过属性href实现点击tab_1等进行内容切换；

     3）通过#tab_content中的样式overflow: hidden;及#t_1,#t_2,#t_3的宽高与包含它们的

          tab_content保持一致，从而实现tab_content中的t_1等div只显示一个;

     4）标签<a>中href可能的值：
             绝对 URL - 指向另一个站点
             相对 URL - 指向站点内的某个文件
             锚 URL - 指向页面中的锚（href="#top"）

     5）属性id的作用：
             id 属性规定 HTML 元素的唯一的 id。
             id 在 HTML 文档中必须是唯一的。
             id 属性可用作链接锚（link anchor）