简单的HTML-DIV切换

最新推荐文章于 2024-09-20 09:25:02 发布

nitongxy

最新推荐文章于 2024-09-20 09:25:02 发布

阅读量8k

点赞数 7

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/nitongxy/article/details/74906344

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这里写图片描述

HTML如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8" />
        <title>showdiv</title>
        <style>
            span{
                cursor: pointer;
            }
            span:hover{
                background-color: yellow;
            }
            div>div{
                border: 1px solid black;
                width: 400px;
                height: 300px;
            }
            .hidden{
                display: none;
            }
        </style>
        <script>
            function showDiv(str) {
                var divs = []; 
                for(var i = 0;i < 4;i++) {
                    divs[i] = document.getElementById("div" + i);
                    divs[i].style.display = "none";
                }
                document.getElementById(str).style.display = "block";               
            }
        </script>
    </head>
    <body>
        <div>
            <span onclick="showDiv('div0');">我的关注</span>
            <span onclick="showDiv('div1');">我的推荐</span>
            <span onclick="showDiv('div2');">我的导航</span>
            <span onclick="showDiv('div3');">我的视频</span>
        </div>
        <div>
            <div id="div0">我的关注</div>
            <div id="div1" class="hidden">我的推荐</div>
            <div id="div2" class="hidden">我的导航</div>
            <div id="div3" class="hidden">我的视频</div>
        </div>
    </body>
</html>