So implementieren Sie ein Navigationsmenü in Javascript

JavaScript ist eine Front-End-Programmiersprache, die aufgrund ihrer leichten, effizienten, leicht zu erlernenden und benutzerfreundlichen Eigenschaften häufig in der Webentwicklung verwendet wird. Im Webdesign ist das Navigationsmenü eine wesentliche Komponente, die den Inhalt der Website organisierter und zugänglicher macht. In diesem Artikel stellen wir vor, wie man mit JavaScript ein einfaches Navigationsmenü implementiert.

1. HTML

Zuerst müssen wir einen Container in HTML erstellen, um das Navigationsmenü zu speichern. Dieser Container kann ein ul-Element oder ein div-Element sein. In diesem Artikel verwenden wir das ul-Element, um ein Navigationsmenü zu implementieren.

<ul id="nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">新闻中心</a></li>
    <li><a href="#">产品中心</a></li>
    <li><a href="#">联系我们</a></li>
</ul>

2. CSS

Als nächstes müssen wir das Navigationsmenü formatieren. Dazu gehören Farbe, Größe, Ränder usw. der Menüelemente. In diesem Artikel müssen wir die Hintergrundfarbe von Menüelementen beim Mouseover sowie den Stil des aktuell ausgewählten Menüelements festlegen.

#nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

#nav li {
    float: left;
    margin: 5px;
}

#nav a {
    display: block;
    padding: 5px;
    color: #333;
    text-decoration: none;
    background-color: #eee;
}

#nav a:hover {
    background-color: #999;
    color: #fff;
}

#nav .current a {
    background-color: #999;
    color: #fff;
}

Im obigen Code definieren wir den Stil des Navigationsmenüs unter #nav und den Stil der Menüelemente unter #nav li und #nav a. Wir verwenden das Float-Attribut, um die Menüelemente horizontal anzuordnen, und das Margin-Attribut, um die Ränder der Menüelemente festzulegen. Wenn wir mit der Maus über den Menüpunkt fahren, ändern wir seine Hintergrundfarbe in Grau und die Textfarbe in Weiß. Wenn der Menüpunkt ausgewählt wird, ändern wir seine Hintergrundfarbe in Schwarz und die Textfarbe in Weiß.

3. JavaScript

Schließlich müssen wir JavaScript verwenden, um das Klickereignis des Menüelements zu implementieren. Wir müssen den aktuell ausgewählten Menüpunkt auf den .active-Stil setzen und den .active-Stil aus dem zuvor ausgewählten Menüpunkt entfernen. Wir können die Methode document.getElementById() verwenden, um Menüelemente abzurufen, und dann die Methoden classList.add() und classList.remove() verwenden, um Stile hinzuzufügen oder zu entfernen.

var nav = document.getElementById('nav');
var links = nav.getElementsByTagName('a');

for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', function() {
        for (var j = 0; j < links.length; j++) {
            links[j].parentNode.classList.remove('active');
        }
        this.parentNode.classList.add('active');
    });
}

Im obigen Code rufen wir zuerst das übergeordnete Element #nav des Menüelements und aller Menüelemente a ab und verwenden dann eine for-Schleife, um jedem Menüelement ein Klickereignis hinzuzufügen. Wenn auf ein Menüelement geklickt wird, entfernen wir zunächst mit einer for-Schleife den .active-Stil des zuvor ausgewählten Menüelements und fügen dann den .active-Stil des aktuell ausgewählten Menüelements hinzu.

4. Vollständiger Code

Kombinieren Sie abschließend die HTML-, CSS- und JavaScript-Codes, um den vollständigen Implementierungscode für das Navigationsmenü zu erhalten.

<ul id="nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">新闻中心</a></li>
    <li><a href="#">产品中心</a></li>
    <li><a href="#">联系我们</a></li>
</ul>

#nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

#nav li {
    float: left;
    margin: 5px;
}

#nav a {
    display: block;
    padding: 5px;
    color: #333;
    text-decoration: none;
    background-color: #eee;
}

#nav a:hover {
    background-color: #999;
    color: #fff;
}

#nav .current a {
    background-color: #999;
    color: #fff;
}

var nav = document.getElementById('nav');
var links = nav.getElementsByTagName('a');

for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', function() {
        for (var j = 0; j < links.length; j++) {
            links[j].parentNode.classList.remove('active');
        }
        this.parentNode.classList.add('active');
    });
}

Das Obige ist der vollständige Code zum Implementieren des Navigationsmenüs mithilfe von JavaScript. Sie können es auf Ihre eigene Website anwenden, um Benutzern das Durchsuchen des Website-Inhalts zu erleichtern.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein Navigationsmenü in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!