js导航栏改变背景

最新推荐文章于 2024-01-05 17:32:15 发布

Alex十年

最新推荐文章于 2024-01-05 17:32:15 发布

阅读量919

点赞数

分类专栏： JavaScript知识总结

本文链接：https://blog.csdn.net/ilikejj0/article/details/79546927

版权

JavaScript知识总结专栏收录该内容

22 篇文章 0 订阅

订阅专栏

使用到this关键字

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>导航栏改变背景</title>
        <style>
            *{margin: 0;padding: 0;}
            #div1{width: 600px;height: 50px;position: relative;margin: 100px auto;background: black;}
            #div1 ul{position: absolute;top:0;left: 0;}
            #div1 ul li{list-style-type: none;width: 100px;height: 50px;text-align: center;
            line-height:50px;float: left;cursor: pointer;font-size: 18px;color:white;}
            .active{background-color: #006400;}
        </style>
        <script>
            window.onload=function(){
                function change1(){
                    var oDiv= document.getElementById('div1');
                    var oLi = oDiv.getElementsByTagName('li');
                    for(var i=0;i<oLi.length;i++){
                        oLi[i].onmouseover=function(){
                            this.className='active';
                        }
                        oLi[i].onmouseout=function(){
                            this.className='';
                        }
                    }
                }
                change1();
            }
        </script>
    </head>
    <body>
        <div id='div1'>
            <ul>
                <li>天猫超市</li>
                <li>天猫国际</li>
                <li>喵鲜生</li>
                <li>电器城</li>
                <li>医药馆</li>
                <li>苏宁易购</li>
            </ul>
        </div>
    </body>
</html>

Alex十年

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js导航栏改变背景

使用到this关键字&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;导航栏改变背景&lt;/title&gt; &lt;style&gt; *{margin: 0;
复制链接

扫一扫