js导航栏改变背景

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ilikejj0/article/details/79546927

使用到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.οnlοad=function(){
                function change1(){
                    var oDiv= document.getElementById('div1');
                    var oLi = oDiv.getElementsByTagName('li');
                    for(var i=0;i<oLi.length;i++){
                        oLi[i].οnmοuseοver=function(){
                            this.className='active';
                        }
                        oLi[i].οnmοuseοut=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>
展开阅读全文

没有更多推荐了,返回首页