tab框切换简易版

最新推荐文章于 2022-10-18 17:07:18 发布

一缕纯氧

最新推荐文章于 2022-10-18 17:07:18 发布

阅读量150

点赞数

分类专栏：小case 文章标签： html css js

本文链接：https://blog.csdn.net/qq_30404223/article/details/113942906

版权

小case 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <title>tab切换</title>

    <style type="text/css">
        body {
            font: "宋体";
            font-size: 12px;
        }

        a:link, a:visited {
            font-size: 12px;
            color: #666;
            text-decoration: none;
        }

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

        #Tab {
            margin: 0 auto;
            width: 454px;
            height: 450px;
            border: 1px solid #29576B;
        }

        .Menubox {
            height: 40px;
        }

            .Menubox ul {
                list-style: none;
                margin: 0px 0px;
                padding: 0;
                position: absolute;
            }

                .Menubox ul li {
                    height: 30px;
                    float: left;
                    background: #29576B;
                    line-height: 20px;
                    display: block;
                    cursor: pointer;
                    width: 150px;
                    text-align: center;
                    color: #fff;
                    font-weight: bold;
                    border-top: 1px solid #29576B;
                    border-left: 1px solid #fff;
                    border-right: 0px solid #fff;
                    border-bottom: 1px solid #fff;
                }

                    .Menubox ul li.hover {
                        height: 30px;
                        background: #fff;
                        border-bottom: 1px solid #fff;
                        color: #29576B;
                    }

        .Contentbox {
            clear: both;
            margin-top: 0px;
            border-top: none;
            height: 181px;
            padding-top: 8px;
            height: 100%;
        }

            .Contentbox ul {
                list-style: none;
                margin: 7px;
                padding: 0;
            }

                .Contentbox ul li {
                    line-height: 24px;
                    border-bottom: 1px dotted #ccc;
                }
    </style>
    <script>
        function setTab(name, cursel, n) {
            for (i = 1; i <= n; i++) {
                var menu = document.getElementById(name + i);
                var con = document.getElementById("con_" + name + "_" + i);
                menu.className = i == cursel ? "hover" : "";
                con.style.display = i == cursel ? "block" : "none";
            }
        }
    </script>
</head>
<body>
    <div id="Tab">
        <div class="Menubox">
            <ul>
                <li id="menu1" onmouseover="setTab('menu',1,3)" class="hover">今日热搜</li>
                <li id="menu2" onmouseover="setTab('menu',2,3)">今日热帖</li>
                <li id="menu3" onmouseover="setTab('menu',3,3)">国际新闻</li>
            </ul>
        </div>
        <div class="Contentbox">
            <div id="con_menu_1" class="hover">
                这里是今日热搜
            </div>
            <div id="con_menu_2" style="display:none">
                这里是今日热帖
            </div>
            <div id="con_menu_3" style="display:none">
                这里是国际新闻
            </div>
        </div>
    </div>
</body>
</html>

一缕纯氧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tab框切换简易版

<!DOCTYPE html><html lang="en"><head> <title>tab切换</title> <style type="text/css"> body { font: "宋体"; font-size: 12px; } a:link, a:visited { font-s.
复制链接

扫一扫