Lors de la modification des styles d'éléments à l'aide de JavaScript, comment y parvenir lors du retour de l'historique ?
P粉982054449
P粉982054449 2023-08-29 21:03:19
0
2
448

Dans la barre de navigation, j'ai utilisé le style de lien actif. Par exemple, dans la barre de navigation, j'ai des liens sur nous, contactez-nous, du matériel, des quiz, etc. Lorsque vous cliquez sur ces liens, le routage change, par exemple 'http://localhost:3000/about-us', ' http:/ /localhost:3000/material' etc., et la classe d'activité est ensuite appliquée au lien pour le mettre en évidence sur l'itinéraire correspondant.

Lors du changement de lien, la classe d'activité est appliquée correctement, mais j'ai remarqué qu'en revenant à l'historique comme '/home' à partir de '/material' (en appuyant sur le bouton retour du navigateur), la classe d'activité ne le sera pas. sois appliqué. Cela s'applique toujours aux liens sur le même itinéraire (avant de cliquer en arrière).

J'ai utilisé javascript dans Mounted() pour appliquer des styles de classe actifs aux liens de navigation (pour la vérification initiale de l'itinéraire et l'application des styles) et également pour basculer lorsque vous cliquez sur le lien.

Alors, quelle est la raison pour laquelle cela ne change pas lorsque l'on remonte dans l'histoire ?

P粉982054449
P粉982054449

répondre à tous (2)
P粉960525583

Si vous utilisez desvue-router和它的composants, vous n'avez pas besoin de gérer cela vous-même :)

Ce composant appliquera une classe CSS spéciale au lien actuellement actif. Par défaut, les classes CSS sontrouter-link-active.

Documentation :https://router.vuejs.org/api/#active-class

    P粉395056196

    Veuillez noter que les cours dans Nuxt sont en réalité

    • nuxt-link-active
    • nuxt-link-exact-active

    Voici un exemple :https://nuxtjs.org/examples/routing-active-links-classes

    Peut être modifié via la configuration comme suit :https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-router#linkactiveclass

      Derniers téléchargements
      Plus>
      effets Web
      Code source du site Web
      Matériel du site Web
      Modèle frontal
      À propos de nous Clause de non-responsabilité Sitemap
      Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!