javascript与css模拟excel的选项卡

如题，有高手能提供相似的代码吗？高仿不要求一样，颜色与样式差不多就可以。

解决方案 »

  1.   


    <!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>Untitled Page</title>
        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("div").eq(0).css("display", "block");
                $("li").click(function () {
                    $("li").css("backgroundColor", "#0099FF");
                    $(this).css("backgroundColor", "green");
                    $("div").css("display", "none");
                    $("div").eq($("li").index(this)).css("display", "block");
                });
            });
        </script>
        <style type="text/css">
            *{ margin:0px; padding:0px; }
            ul{ height:22px; width:500px; margin:0px; }
            ul li{ height:20px; line-height:20px; width:100px; border:1px solid blue; cursor:pointer;
                   margin:0px 1px 0px 1px; list-style-type:none; float:left; background-color:#0099FF;}
            div{ width:500px; height:300px; background-color:#CCCCCC; position:absolute; top:23px; left:0px; display:none; font-size:20px; }
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </body>
    </html>大概意思如此，要做很像的要弄图片，估计没人会给你做，除非有现成的，叫你方法还是可以的
    求高手指正！！