Comment implémenter le menu de navigation en javascript

JavaScript est un langage de programmation frontal largement utilisé dans le développement Web en raison de ses caractéristiques légères, efficaces, faciles à apprendre et à utiliser. Dans la conception Web, le menu de navigation est un élément essentiel qui rend le contenu du site Web plus organisé et accessible. Dans cet article, nous présenterons comment implémenter un menu de navigation simple à l'aide de JavaScript.

1. HTML

Tout d'abord, nous devons créer un conteneur en HTML pour stocker le menu de navigation. Ce conteneur peut être un élément ul ou un élément div. Dans cet article, nous utiliserons l'élément ul pour implémenter un menu de navigation.

<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

Ensuite, nous devons styliser le menu de navigation. Cela inclut la couleur, la taille, les marges des éléments de menu, etc. Dans cet article, nous devons définir la couleur d'arrière-plan des éléments de menu au survol de la souris ainsi que le style de l'élément de menu actuellement sélectionné.

#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;
}

Dans le code ci-dessus, nous définissons le style du menu de navigation sous #nav, et le style des éléments de menu sous #nav li et #nav a. Nous utilisons l'attribut float pour organiser les éléments de menu horizontalement et l'attribut margin pour définir les marges des éléments de menu. Lorsque la souris survole l'élément de menu, nous changeons sa couleur d'arrière-plan en gris et la couleur du texte en blanc ; lorsque l'élément de menu est sélectionné, nous changeons sa couleur d'arrière-plan en noir et la couleur du texte en blanc.

3. JavaScript

Enfin, nous devons utiliser JavaScript pour implémenter l'événement click de l'élément de menu. Nous devons définir l'élément de menu actuellement sélectionné sur le style .active et supprimer le style .active de l'élément de menu précédemment sélectionné. Nous pouvons utiliser la méthode document.getElementById() pour obtenir des éléments de menu, puis utiliser les méthodes classList.add() et classList.remove() pour ajouter ou supprimer des styles.

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');
    });
}

Dans le code ci-dessus, nous obtenons d'abord l'élément parent #nav de l'élément de menu et de tous les éléments de menu a, puis utilisons une boucle for pour ajouter un événement de clic à chaque élément de menu. Lorsqu'un élément de menu est cliqué, nous utilisons d'abord une boucle for pour supprimer le style .active de l'élément de menu précédemment sélectionné, puis ajoutons le style .active de l'élément de menu actuellement sélectionné.

4. Code complet

Enfin, combinez les codes HTML, CSS et JavaScript pour obtenir le code complet d'implémentation du menu de navigation.

<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');
    });
}

Ce qui précède est le code complet pour implémenter le menu de navigation en utilisant JavaScript. Vous pouvez l'appliquer à votre propre site Web pour aider les utilisateurs à mieux parcourir le contenu du site Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!