Home >Web Front-end >JS Tutorial >Example of changing the background of the navigation bar in js

Example of changing the background of the navigation bar in js

小云云Original: 2018-03-14 16:43:491531browse

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jquery adds HTML tags with stylesNext article：jquery adds HTML tags with styles

See more

Example of changing the background of the navigation bar in js

Related articles