JS之实现鼠标切换效果

最新推荐文章于 2023-04-10 11:19:58 发布

老施同学

最新推荐文章于 2023-04-10 11:19:58 发布

阅读量482

点赞数 1

本文链接：https://blog.csdn.net/guofengs/article/details/51248816

版权

个人总结专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tab切换效果</title>
    <style type="text/css">
        #card{
            width:300px;
            height:200px;
        }
        #title{
            width:100%;
            height:25px;
            line-height:25px;
        }
        #card a{
            line-height:25px;
            margin:0px;
            padding:0px;
            border:2px solid blue;
            width:80px;
            color:green;
        }
        #content{
            width:100%;
            height:175px;
            background:#7f7f7f;
        }
        #content div{
            display:none;

        }
        #title .act{
            border:2px solid red;
        }
        #content .active{
            display:block;
        }
    </style>
</head>
<body>
    <div id = "card">
        <div id = "title">
            <a οnmοusemοve="show(1)" class="act">HTML</a>
            <a οnmοusemοve="show(2)">CSS</a>
            <a οnmοusemοve="show(3)">JS</a>
        </div>
        <div id="content">
            <div class="active">
                <ul>
                    <li>段落标签</li>
                    <li>表格标签</li>
                    <li>文本标签</li>
                </ul>
            </div>
            <div>CSS是层叠样式表</div>
            <div>JS是一种脚本语言</div>
        </div>
    </div>
    <script>
        function show(num) {
            var alla = document.getElementsByTagName("a");
            //获取content里的所有div
            var divs = document.getElementById("content").getElementsByTagName("div");
            for(var n=0;n<divs.length;n++){
                if(n==num-1){//找到了第num个对象，然后现实
                    alla[n].className = "act";
                    divs[n].style.display = "block";
                }else{
                    alla[n].className = "";
                    divs[n].style.display = "none";
                }
            }
        }
    </script>
</body>
</html>