两个div之前切换（tab页面）点击后实现页面的现实和隐藏

最新推荐文章于 2024-03-30 10:38:54 发布

ZhuangYQ丶

最新推荐文章于 2024-03-30 10:38:54 发布

阅读量2.8k

点赞数

分类专栏： ASP.NET学习中出现的问题

本文链接：https://blog.csdn.net/iilegend/article/details/77568873

版权

ASP.NET学习中出现的问题专栏收录该内容

60 篇文章 0 订阅

订阅专栏



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title> New Document </title>
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
</head>

<body>
    <style>
        ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
            vheight: 24px;
        }

            ul li {
                float: left;
                display: inline;
            }

            ul a {
                text-decoration: none;
                border-top: 1px solid #ddd;
                border-bottom: 1px solid #ccc;
                border-left: 1px solid #ddd;
                border-right: 1px solid #ddd;
                display: block;
                padding: 5px 0 3px;
                margin-left: -1px;
                width: 158px;
                font-weight: bold;
                text-align: center;
                line-height: 15px;
                color: #11449E;
            }

        a.on, a:hover {
            padding-top: 6px;
            padding-bottom: 3px;
            width: 159px;
            border: 1px solid #ccc;
            border-bottom: 0;
            background: #DEEBFF;
        }
    </style>
    <script>
function findA(obj) {
    TagA = obj.getElementsByTagName("a");
    if (TagA.length > 0)
        return TagA[0];
}

        function findContentDIV(obj) {
            TagDiv = obj.childNodes;
            var arrDiv = new Array;
            for (i = 0; i < TagDiv.length; i++) {
                var objDiv = TagDiv[i];
                var re = /div/i;
                var arr = re.exec(objDiv.tagName);
                if (arr != null) {
                    if (arr.index == 0) {
                        arrDiv.push(objDiv);
                    }
                }
            }
            return arrDiv;
        }

        function chShift(o, divGroupID) {
            o.style.cursor = "pointer";
            var t = o.parentNode;
            var tA = t.getElementsByTagName("a");
            var tGroup = document.getElementById(divGroupID);
            var tGroupDIV = findContentDIV(tGroup);

            for (i = 0; i < tA.length; i++) {
                tA[i].className = null;
                tGroupDIV[i].style.display = "none";
                if (tA[i] == findA(o)) {
                    tA[i].className = "on";
                    tGroupDIV[i].style.display = "block";
                }
            }
        }</script>
    <table>
        <tr>
            <td>
                <div>
                    <ul>
                        <li onmouseover="JavaScript:chShift(this,'divGroup')"><a class="on">Tab标题一</a></li>
                        <li onmouseover="javascript:chShift(this,'divGroup')"><a>Tab标题二</a></li>
                        <li onmouseover="javascript:chShift(this,'divGroup')"><a>Tab标题三</a></li>
                    </ul>
                </div>
            </td>
        </tr>
        <tr>
            <td>


                <div id="divGroup">

                    <div>
                        <table>
                            <tr><td>Tab标题一对应的内容</td></tr>

                        </table>

                    </div>
                    <div style="display:none">
                        Tab标题二对应的内容
                    </div>
                    <div style="display:none">
                        Tab标题三对应的内容
                    </div>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

效果图：
这里写图片描述

ZhuangYQ丶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
两个div之前切换（tab页面）点击后实现页面的现实和隐藏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <me
复制链接

扫一扫