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:342045parcourir
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>
$('#menu li a').click(function () {
var f = this;
$('#menu li a').each(function () {
this.className = this == f ? 'active' : 'none'
});
});
</script>
</body>
</html>Recommandations associées :
JavaScript pour implémenter des effets spéciaux de barre de navigation personnalisés
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!