JavaScript学习之简单Tab栏

最新推荐文章于 2023-04-11 21:15:41 发布

柒夜zzz

最新推荐文章于 2023-04-11 21:15:41 发布

阅读量125

点赞数

分类专栏： JavaScript 文章标签： JavaScript小程序

本文链接：https://blog.csdn.net/dkq123456789/article/details/79739576

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

用JavaScript编写Tab栏，需要注意每次执行完onmouseover事件后，都要清除一下样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab栏demo</title>
    <style>
        
         /*盒子的css样式*/
         * {
            margin:0;
            padding:0;
        }
        ul {
            width: 300px;
            height: 50px;
            margin:0 auto;
        }
        li {
            list-style: none;
            width: 100px;
            height: 50px;
            background-color: pink;
            float: left;
            text-align: center;
            line-height: 50px;

        }
        #box {
            margin:0 auto;
            width: 300px;
            height: 200px;
            border:1px solid #000;
        }
        #box div {
            width: 300px;
            height: 200px;
            display: none;
        }
    </style>
</head>
<body>
<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
<div id="box">
    <div>这是盒子一</div>
    <div>这是盒子二</div>
    <div>这是盒子三</div>
</div>
<script type="text/javascript">
    //页面加载完成之后执行函数
    window.οnlοad=function(){
        //获取各个元素
       var lis=document.getElementsByTagName("li");
        var box=document.getElementById("box");
        var divs=box.getElementsByTagName("div");
        for(var i=0;i<lis.length;i++){
            lis[i].index=i;
            lis[i].οnmοuseοver=function(){
                //清除每次残留的样式
                for(var j=0;j<lis.length;j++){
                    lis[j].style.background="pink";
                    divs[j].style.display="none";
                }
                //鼠标悬停时添加的样式
               this.style.background="red";
                divs[this.index].style.display="block";

            }
        }
    }
</script>
</body>
</html>

有问题的地方还请各位大神指出，谢谢

柒夜zzz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习之简单Tab栏

用JavaScript编写Tab栏，需要注意每次执行完onmouseover事件后，都要清除一下样式&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;tab栏demo&lt;/title&gt; &am
复制链接

扫一扫