javascript - Après avoir cliqué sur Nav et utilisé JS pour ajouter de la couleur, comment la couleur modifiée peut-elle être conservée après le saut de page ?

Question

Chaque page de la navigation est le même morceau de HTML lié via la balise d'arrière-plan. Après avoir cliqué sur la navigation, j'ai changé la couleur via js, mais lorsque j'ai cliqué pour accéder à une page, la couleur modifiée par js est devenue invalide. moi ceci Comment résoudre ce problème?

Answer 1

Je vais y répondre moi-même. Cela n'a pas besoin d'être aussi compliqué que ce que vous avez écrit. Ajoutez simplement un morceau de CSS à chaque page

.

//首页
ul li a:nth-child(1){
            color: #FF0000;
        }
//品牌介绍
ul li a:nth-child(2){
            color: #FF0000;
        }
//招牌美食
ul li a:nth-child(3){
    .........
}

Answer 2

Enregistrez quoi, bon sang, j'ai entré la page a à partir de la barre de navigation, je l'ai fermée, puis j'ai entré la page b à partir de la barre d'adresse. Allez-vous mettre en surbrillance la page a pour moi à ce moment-là ?
Écrivez une fonction d'analyse commune à toutes les pages et utilisez directement l'adresse de navigation pour correspondre au href

Answer 3

Dites-moi l'idée et ajoutez le jugement js à chaque page

假设跳转之后页面的地址是http://********/zhaoshang.html

if(/zhaoshang/.test(window.location.pathname)){

招商加盟.style.color="红色"

}else if(){
...
}

Answer 4

Quelques façons :

1. La barre de navigation a son propre iframe ;

2. Utilisez sessionStorage / localStorage pour enregistrer l'état

3. Page de saut avec paramètres URL&active =xxx;

4. Utiliser le spa ne saute pas vraiment à la page
   En regardant les questions du répondeur, je suppose que 2 ou 3 conviennent mieux

Answer 5

Il n'est pas nécessaire d'utiliser JS, utilisez simplement le nom de classe CSS. Ajoutez un nom de classe à chaque navigation et placez-le dans le fichier CSS de cette navigation

.

<nav>
    <a class="index-active">首页</a>
    <a class="details-active">详情页</a>
 </nav>
 
 在 index.css 中 写 
     .idnex-active {...}
 在 detail.css 中 写 
     .detail-active {...} 

Answer 6

Enregistrez-le localement

Answer 7

L'arrière-plan peut déterminer à quelle page se trouve la page actuelle, puis ajouter une catégorie. C'est plus pratique.

Answer 8

Enregistrez localement, et lorsque vous entrez à nouveau dans la page, lisez le cache et portez un jugement

Answer 9

Enregistrez le statut dans le cookie.

L'enregistrement dans une session est également possible, mais cela nécessite la coopération du développement back-end.

Answer 10

Ajoutez un actif à la classe li, définissez la couleur de la police de l'actif et ajoutez dynamiquement des classes à chaque li !