Maison > Article > interface Web > Exemple détaillé de la façon dont jQuery implémente la méthode de modification de la couleur de l'élément de menu d'en-tête de la barre de navigation après avoir cliqué dessus

Exemple détaillé de la façon dont jQuery implémente la méthode de modification de la couleur de l'élément de menu d'en-tête de la barre de navigation après avoir cliqué dessus

小云云original: 2017-12-31 16:42:342104parcourir

Cet article présente principalement la méthode de jQuery pour changer la couleur de l'élément de menu de l'en-tête de la barre de navigation après avoir cliqué dessus. Cela implique la réponse de jQuery aux événements de la souris pour la traversée et la transformation des attributs des éléments de la page. Les amis qui en ont besoin peuvent s'y référer. j'espère que cela aidera tout le monde.

L'effet de mise en œuvre est le suivant :

Sans plus tard, passons directement au code :

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="UTF-8"> 
  <title>Title</title> 
  <style> 
    a{ 
      text-decoration: none; 
      color: black; 
    } 
    #menu{ 
      width: 100%; 
      height: 20px; 
      background: gainsboro; 
    } 
    ul li{ 
      list-style: none; 
      float: left; 
      padding-left: 20px; 
      background-color: whitesmoke; 
    } 
    .active { 
      color: white; 
      background-color: black; 
    } 
    .none { 
      background-color: whitesmoke; 
    } 
  </style> 
</head> 
<body> 
<ul id="menu"> 
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a></li> 
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >直播</a></li> 
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >新闻</a></li> 
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >关于</a></li> 
</ul> 
<script src="jquery-1.7.2.min.js"></script> 
<script> 
  $(&#39;#menu li a&#39;).click(function () { 
    var f = this; 
    $(&#39;#menu li a&#39;).each(function () { 
      this.className = this == f ? &#39;active&#39; : &#39;none&#39; 
    }); 
  }); 
</script> 
</body> 
</html>

Recommandations associées :

JavaScript pour implémenter des effets spéciaux de barre de navigation personnalisés

Exemple de code pour JavaScript pour implémenter un superbe saut périlleux dans la barre de navigation personnalisée effet nuage

Comment implémenter un lien de barre de navigation pour sauter après avoir cliqué, et ajouter de la couleur au lien correspondant sur la nouvelle page

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!

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：Explication détaillée de jQuery implémentant des tables modifiables et générant des résultats jsonArticle suivant：Explication détaillée de jQuery implémentant des tables modifiables et générant des résultats json

Articles Liés

Voir plus