JavaScript implémente la barre de navigation gauche et le saut de page droit

Dans la conception Web, la barre de navigation est l'un des éléments importants de la page. Elle peut aider efficacement les utilisateurs à trouver les pages fonctionnelles dont ils ont besoin. Les barres de navigation courantes incluent la navigation supérieure et la navigation gauche. Dans la conception d'interactions, l'implémentation de barres de navigation et de sauts de page nécessite l'utilisation de certaines compétences JavaScript.

Cet article expliquera comment utiliser javascript pour implémenter la barre de navigation de gauche et coopérer avec le saut de page de droite. J'espère que cela sera utile aux débutants.

1. Disposition de l'interface

Tout d'abord, nous devons déterminer la conception de la disposition de la barre de navigation. Dans cet exemple, nous présentons le côté gauche sous la forme d'une arborescence, et la police sélectionnée est Microsoft Yahei, la couleur est #333 et la couleur de fond est #fff ; le bloc de page de droite utilise un fond blanc avec des polices noires ; . Rendre la page globale simple et belle. Le code de la structure arborescente est le suivant :

<ul class="tree">
    <li>
        <span>导航1</span>
        <ul>
            <li><a href="#">子导航1</a></li>
            <li><a href="#">子导航2</a></li>
        </ul>
    </li>    
    <li><a href="#">导航2</a></li>
    <li><a href="#">导航3</a></li>
    <li><a href="#">导航4</a></li>
</ul>

Le code du bloc de page droit est le suivant :

<div class="content">
    <div class="title">标题</div>
    <div class="page">内容</div>
</div>

2. Paramètres de style

Une fois la conception de la mise en page déterminée, le style doit être défini. Dans cet exemple, nous définissons des styles CSS pour les éléments afin de rendre la page plus belle. Pour la barre de navigation, nous devons définir les styles de ul, li, span, a et d'autres éléments. Le code est le suivant :

.tree {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tree li {
    margin-bottom: 3px;
}
.tree span, .tree a {
    display: block;
    padding: 5px;
    text-decoration: none;
}
.tree ul {
    margin: 0 0 0 20px;
}
.tree ul li {
    margin-bottom: 0;
}

Pour le bon bloc de page, nous devons définir les styles de marges, de polices et autres. éléments. Le code est le suivant :

.content {
    margin: 20px;
    background-color: #fff;
}
.title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
}
.page {
    font-size: 14px;
    line-height: 1.5;
}

3. Code javascript

Pour la barre de navigation de gauche, nous devons réaliser qu'après avoir cliqué pour sélectionner un élément, la page de droite passera à la page correspondante et ajoutera une marque de style. à la barre de navigation sélectionnée. Le code d'implémentation est le suivant :

// 获取左侧导航栏中的所有LI元素，以及右侧页面的所有内容块
let liList = document.querySelectorAll('.tree li');
let contentList = document.querySelectorAll('.content .page');

// 为每个导航栏的a标签添加点击事件
liList.forEach(function (li, index) {
    let a = li.querySelector('a');
    a.addEventListener('click', function (e) {
        // 阻止a标签默认跳转事件
        e.preventDefault();

        // 遍历所有导航栏，将选中项样式设置为active，其他取消。
        liList.forEach(function (li) {
            li.classList.remove('active');
        });
        li.classList.add('active');

        // 遍历所有页面块，只显示选中项的页面块，其他隐藏。
        contentList.forEach(function (content) {
            content.style.display = 'none';
        });
        contentList[index].style.display = 'block';
    });
});

Nous enregistrons le code sous forme de fichier js, puis l'importons dans la page pour implémenter une barre de navigation réactive, réalisons la barre de navigation de gauche et le saut de page à droite.

À ce stade, nous avons terminé la partie code de cet exemple. Grâce à cet exemple simple, je pense que les lecteurs auront une compréhension de base de la façon d'utiliser JavaScript pour implémenter des barres de navigation réactives et des sauts de page à droite, et qu'il pourra également être utilisé de manière flexible dans la conception Web future.

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!