Maison > Article > interface Web > Exemple d'implémentation JS de l'effet d'un clic sur un nom de répertoire pour changer de couleur

Exemple d'implémentation JS de l'effet d'un clic sur un nom de répertoire pour changer de couleur

眼眸间的深情original: 2021-07-19 19:45:021487parcourir

J'aime beaucoup certains effets spéciaux, et j'aime aussi l'effet de clic de navigation de certains sites Web d'entreprise, mais peu importe la façon dont j'utilise l'effet de clic, ce n'est pas très idéal, j'ai donc eu des problèmes avec cet effet. en apprenant les effets de changement liés à JS, j'ai finalement réalisé l'entreprise Un exemple de l'effet de changement de couleur en cliquant sur le nom du répertoire dans la barre de navigation du site :

Tout d'abord, je vais montrer mon code final. effet pour que tout le monde puisse y jeter un œil :

Exemple dimplémentation JS de leffet dun clic sur un nom de répertoire pour changer de couleur Comme le montre l'image ci-dessus, l'effet que nous devons obtenir Lorsque l'utilisateur clique sur la barre de navigation correspondante, nous pouvons laisser le nom de la barre de navigation correspondante changer de couleur pour rappeler à l'utilisateur le page sur laquelle ils se trouvent en ce moment.

Maintenant, je vais vous montrer le code Html et JS qui obtient l'effet de collision ci-dessus :

Montrons d'abord le code HTML frontal :

<div>
<div>
   <ul>
       <li><a class="location now" href="{:U(&#39;Index/index&#39;)}">首页</a></li>
            <li><a  href="{:U(&#39;Index/product&#39;)}">产品展示</a></li>
            <li><a  href="{:U(&#39;Index/about&#39;)}">关于我们</a></li>
            <li><a  href="{:U(&#39;Index/news&#39;)}">新闻资讯</a></li>
            <li><a  href="{:U(&#39;Index/video&#39;)}">视频中心</a></li>
            <li><a  href="{:U(&#39;Index/contact&#39;)}">联系我们</a></li>
        </ul>
    </div>
</div>

Ensuite, montrons le code JS :

<script type="text/javascript">
    $(function () {
        var url = decodeURI(location.pathname+location.search);
        $(".location").each(function () {
            if ($(this).attr(&#39;href&#39;) == url)
            {
                $(this).addClass(&#39;now&#39;)
            }else {
                $(this).removeClass(&#39;now&#39;)
            }
        })
    })
</script>

3. analyse :

Page d'accueil :

L'élément avec l'emplacement du nom de classe est maintenant l'étiquette de la couleur transformée.

Code JS :

decodeURI() : peut décoder l'URI encodé par la fonction encodeURI().

location.pathname : Le résultat obtenu est la chaîne d'adresse complète dans la barre d'adresse du navigateur.

location.search : Qu'est-ce que vous obtenez ? et tout ce qui suit dans le chemin de l'URL.

Exemple d'analyse :

Le chemin de l'URL accédé est :

http://www.zywpro.com/Home/Index/about.html?id=1&name=wdy&password=password

location.pathname Le résultat obtenu est :

http://www.zywpro.com/Home/Index/about.html?id=1&name=wdy&password=password

location.les résultats de recherche sont :

?id=1&name=wdy&password=password

each() : Spécifie la fonction à exécuter pour chaque élément correspondant. Le retour de false peut être utilisé pour arrêter la boucle plus tôt.

Exemple :

Affiche le texte de chaque élément li :

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("li").each(function(){
      alert($(this).text())
    });
  });
});
</script>
</head>
<body>
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>

attr() : définit ou renvoie la valeur d'attribut de l'élément sélectionné. attr (une valeur renvoie la valeur de l'élément sélectionné, deux valeurs définissent la valeur de l'élément sélectionné)

addClass() : ajoute une ou plusieurs classes à l'élément sélectionné.

removeClass() : Supprime une ou plusieurs classes de l'élément sélectionné.

D'accord, cette simple navigation par clic pour obtenir un effet de changement de couleur est réalisée. Bien que cela semble très simple, cela implique beaucoup de connaissances frontales, donc nous faisons chaque chose simple avec sérieux, donc quand peu importe à quel point les choses sont compliquées, nous rencontre, nous pouvons transformer le complexe en simple, et nous pouvons également gérer le problème mieux et plus rapidement ! Continuez votre bon travail, chers développeurs PHP !

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!

php html 循环 JS location li http

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment créer une animation Pikachu avec CSS+JS (analyse de code)Article suivant：Comment créer une animation Pikachu avec CSS+JS (analyse de code)

Articles Liés

Voir plus