Example of changing the background of the navigation bar in js-JS Tutorial-php.cn

Example of changing the background of the navigation bar in js

小云云

Release： 2018-03-14 16:43:49

Original

1505 people have browsed it

This article mainly shares with you examples of changing the background of the navigation bar in js, hoping to help everyone.

Use this keyword

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title>导航栏改变背景</title>
        <style>
            *{margin: 0;padding: 0;}
            #p1{width: 600px;height: 50px;position: relative;margin: 100px auto;background: black;}
            #p1 ul{position: absolute;top:0;left: 0;}
            #p1 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 op= document.getElementById(&#39;p1&#39;);                    
                    var oLi = op.getElementsByTagName(&#39;li&#39;);                    
                    for(var i=0;i<oLi.length;i++){
                        oLi[i].onmouseover=function(){
                            this.className=&#39;active&#39;;
                        }
                        oLi[i].onmouseout=function(){
                            this.className=&#39;&#39;;
                        }
                    }
                }
                change1();
            }        </script>
    </head>
    <body>
        <p id=&#39;p1&#39;>
            <ul>
                <li>天猫超市</li>
                <li>天猫国际</li>
                <li>喵鲜生</li>
                <li>电器城</li>
                <li>医药馆</li>
                <li>苏宁易购</li>
            </ul>
        </p>
    </body></html>

Copy after login

Related recommendations:

How to use css selector to switch the navigation bar background image?

The above is the detailed content of Example of changing the background of the navigation bar in js. For more information, please follow other related articles on the PHP Chinese website!