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-js tutoriel-php.cn

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

小云云

Libérer： 2017-12-31 16:42:34

original

2052 Les gens l'ont consulté

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>

Copier après la connexion

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!