Tutoriel sur la création d'une barre de navigation Alipay exquise

En fait, ce n’est pas vraiment un tutoriel. Je fais juste quelque chose quand je n’ai rien à faire et je le publie ensuite pour que tout le monde le partage. J’espère que vous n’hésiterez pas à m’apprendre ^!^.

Parce que je venais de voir le tutoriel de Yadong qui ressemblait un peu à celui-ci, j'y ai réfléchi et j'ai écrit un JS qui n'utilisait qu'un court paragraphe et c'était fait. JQuery est utilisé dans Yadong. Je pense que si quelque chose de plus simple peut être directement téléchargé sur JS, alors la bibliothèque peut être appelée en cas de forte demande.

Le code HTML de base est le suivant :

Avis:

1. Les éléments de menu peuvent être librement développés en copiant l'étiquette de la liste rouge avec le nom de classe « sous-élément » dans le code. C’est-à-dire copier tout le contenu de la balise ul et coller-la ensuite.
2. Ajoutez simplement l'attribut id de la balise de liste ul avec le nom de classe "sous-élément" dans l'ordre, tel que : sous-élément1, sous-élément2, sous-élément3...
3. L'étiquette de liste bleue avec le nom de classe « active » représente l'élément de menu par défaut lors du chargement.

Code JavaScript de base :

La fonction principale est : l'effet des éléments de sous-menu qui changent à mesure que les éléments de menu changent (similaire à l'onglet onglet).

window.onload = function() {
for( i=1; i<8; i++ ){
var nodeItem = document.getElementById("item"+i); //遍历每个菜单项增加onClick事件
nodeItem.onclick = function() {
/*菜单激活动态样式*/
for( n=0; n<6; n++){
document.getElementsByTagName("li")[n].className = "";
//alert(this.className);
}
this.className = "active";
var linkNode = parseInt( this.id.substring(4,5) );
for ( j=1; j<10; j++){ //按顺序匹配菜单项和菜单内容
var nodeSubItem = document.getElementById("sub-item"+j);
if ( linkNode == j ){ //如果菜单项和菜单内容匹配则显示，否则隐藏
nodeSubItem.style.display = "block";
}else{
nodeSubItem.style.display = "none";
}
}
}
}
}

Je n’expliquerai pas grand chose sur le code JS, j’ai déjà commenté les parties importantes. Parce que je suis le même, il a fallu beaucoup d'efforts pour obtenir l'effet, et j'espère que les experts pourront me donner plus de conseils.

Le code CSS est un peu petit donc je ne le publierai pas. En fait, le code principal ne contient que quelques phrases que je dois écrire davantage pour le rendre parfait ! Les étudiants intéressés peuvent télécharger directement mon code source pour la recherche. Si vous avez des questions, laissez-moi un message ^!^