通用的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>通用TAB-有自动轮换功能</title>
        <script src="http://www.zzzyk.com/ajaxjs/jquery-1.6.2.min.js" type="text/javascript"></script>
        <style type="text/css">
            <!--
            * {
            padding:0;
            margin:0;
            list-style:none;
            }
            .cur {
            color:#000;
            background-color:#FFF;
            }
            .red {
            font-size: 20px;
            font-weight: bolder;
            }
            #lxfTab-click {
            -moz-border-radius:5px;
            background-color:#069;
            width:600px;
            overflow:hidden;
            padding:2px;
            margin-top:20px;
            margin-left:auto;
            margin-right:auto;
            }
            #lxfTab-click .title {
            color:#FFF;
            }
            #lxfTab-click .title li {
            float:left;
            padding:1px;
            cursor:pointer;
            width:40px;
            margin:8px 0 8px 8px;
            border:1px solid #FFF;
            -moz-border-radius:5px;
            text-align:center;
            }
            #lxfTab-click .content {
            width:600px;
            float:left;
            }
            #lxfTab-click .content li {
            word-wrap:break-word;
            background-color:#FFF;
            padding:6px;
            -moz-border-radius:5px;
            width: 572px;
            margin-top: 0px;
            margin-right: 8px;
            margin-bottom: 8px;
            margin-left: 8px;
            }
            -->
        </style>
        <script>
            $(function() {
                $("#lxfTab-click .title li:first").addClass("cur");
                $("#lxfTab-click .content li:not(:first)").hide();
                $("#lxfTab-click .title li").click(function() {
                    var index = $("#lxfTab-click .title li").index($(this));
                    $("#lxfTab-click .title li").removeClass("cur");
                    $(this).addClass("cur");
                    $("#lxfTab-click .content li").hide().eq(index).fadeIn("fast");
                    $(".now").text(index + 1);
                });
                /* 自动轮换*/
                var i = -1;
                //设置起始位置
                var speed = 2000;
                //设置轮换速度
                var n = $("#lxfTab-click .title li").length - 1;
                function autoroll() {
                    if(i >= n) {
                        i = -1;
                    }
                    i++;
                    $("#lxfTab-click .title li").removeClass("cur").eq(i).addClass("cur");
                    $("#lxfTab-click .content li").hide().eq(i).fadeIn("fast");
                    timer = setTimeout(autoroll, speed);
                };
                /* 鼠标悬停即停止自动轮换 */
                function stoproll() {
                    $("#lxfTab-click li").hover(function() {
                        clearTimeout(timer);
                        i = $(this).prevAll().length;
                    }, function() {
                        timer = setTimeout(autoroll, speed);
                    });
                };
                autoroll();
                //执行自动轮换函数
                stoproll();
                //启动悬停功能
            });
        </script>
    </head>
    <body>
        <div id="lxfTab-click">
            <ul class="title">
                <li>
                    1
                </li>
                <li>
                    2
                </li>
                <li>
                    3
                </li>
                <li>
                    4
                </li>
                <li>
                    5
                </li>
            </ul>
            <div class="LRbutton">
                <ul>
                    <li></li><li></li><li></li>
                </ul>
            </div>
            <ul class="content">
                <li>
                    1
                </li>
                <li>
                    2
                </li>
                <li>
                    3
                </li>
                <li>
                    4
                </li>
                <li>
                    5
                </li>
            </ul>
        </div>
    </body>
</html>
上一个：Js实现菜单弹性菜单
下一个：使用Dreamweaver制作的JS下拉菜单
更多图片编程知识: