Heim > Web-Frontend > js-Tutorial > Hauptteil

Beispiel für das Ändern des Hintergrunds der Navigationsleiste in js

小云云
Freigeben: 2018-03-14 16:43:49
Original
1498 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich Beispiele für die Änderung des Hintergrunds der Navigationsleiste in js vorgestellt. Ich hoffe, er kann Ihnen helfen.

Verwenden Sie dieses Schlüsselwort

<!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>
Nach dem Login kopieren

Verwandte Empfehlungen:

Wie verwende ich die CSS-Auswahl, um das Hintergrundbild der Navigationsleiste zu wechseln?

Das obige ist der detaillierte Inhalt vonBeispiel für das Ändern des Hintergrunds der Navigationsleiste in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage