动态标签实现源码

最新推荐文章于 2024-07-01 19:19:05 发布

J2eeFans

最新推荐文章于 2024-07-01 19:19:05 发布

阅读量959

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB 文章标签： border div table class javascript html

本文链接：https://blog.youkuaiyun.com/jinlong0/article/details/2029597

WEB 专栏收录该内容

22 篇文章

订阅专栏

类似于网易的动态切换效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>TEST.html</title>
        <style type="text/css">
            body {
                font-size: 12px;
                line-height: 150%;
            }

            table {
                font-size: 12px;
                line-height: 150%;
            }

            a:link {
                color: #000;
                text-decoration: none
            }

            a:visited {
                color: #000;
                text-decoration: none
            }

            a:active {
                color: #000;
                text-decoration: none
            }

            a:hover {
                color: #ff0000;
                text-decoration: underline
            }

            .s01 {
                border: #6BA6DE 1px solid;
                border-bottom: 0px;
                background: #eff7ff;
                padding-top: 1px
            }

            .s02 {
                border: #ffffff 1px solid;
                border-bottom: #6BA6DE 1px solid;
                background: #ffffff;
            }
        </style>

        <script language="javascript">
            function secBoard(n)
            {
                for(i=1;i<5;i++)
                {
                    eval("document.getElementById('cl0"+i+"').className='s02'");
                    eval("tbx0"+i+".style.display='none'");
                }
                eval("document.getElementById('cl0"+n+"').className='s01'");
                eval("tbx0"+n+".style.display='block'");
            }
        </script>
    </head>

    <body>
        <table width="247" border="0" cellpadding="0" cellspacing="0"
            id="secTable">
            <tr align="center">
                <td id="cl01" width="60" class="s01" onClick="secBoard(1);"
                    style="cursor: hand">
                    选项卡1
                </td>
                <td id="cl02" width="60" class="s02" onClick="secBoard(2);"
                    style="cursor: hand">
                    选项卡2
                </td>
                <td id="cl03" width="60" class="s02" onClick="secBoard(3);"
                    style="cursor: hand">
                    选项卡3
                </td>
                <td id="cl04" width="60" class="s02" onClick="secBoard(4);"
                    style="cursor: hand">
                    选项卡4
                </td>

            </tr>
        </table>
        <table width="247" height="200"
            style="border: #6BA6DE 1px solid; border-top: 0px;">
            <tr>
                <td height="20">
                    这还可以放固定不变的东西，如果要加上，去掉注释符
                </td>
            </tr>
            <tr>
                <td valign="top" style="padding-top: 5px;">
                    <div style="display: " id="tbx01">
                        这个里面可以放你需要的东西，如果有多个选项卡的话可以适量修改代码就可以了
                    </div>
                    <div style="display: none; height: 300" id="tbx02">
                        具体的大小你自己调，我这做的很明显，注意上面表格和下面表格宽度要一样，下面一个表格的高度随便改，最好手动修改本代码，即不要用 DW
                        等工具调大小
                    </div>
                    <div style="display: none; height: 400" id="tbx03">
                        所有的样式呀什么的，你都可以自己改，不懂的再问我
                    </div>
                    <div style="display: none;" id="tbx04">
                        嘿嘿，专为
                        <font color="#ff0000">.....</font> 设计制作
                    </div>
                </td>
            </tr>
        </table>

    </body>
</html>