Heim > Artikel > Web-Frontend > Detailliertes Beispiel dafür, wie jQuery die Methode zum Ändern der Farbe des Menüelements in der Kopfzeile der Navigationsleiste implementiert, nachdem darauf geklickt wurde
Detailliertes Beispiel dafür, wie jQuery die Methode zum Ändern der Farbe des Menüelements in der Kopfzeile der Navigationsleiste implementiert, nachdem darauf geklickt wurde
- 小云云Original
- 2017-12-31 16:42:342045Durchsuche
In diesem Artikel wird hauptsächlich die Methode von jQuery zum Ändern der Farbe des Menüelements in der Navigationsleiste nach dem Klicken vorgestellt. Dabei handelt es sich um die Reaktion von jQuery auf Mausereignisse zum Durchlaufen und zur Attributtransformation von Seitenelementen. Ich hoffe, es wird allen helfen.
Der Implementierungseffekt ist wie folgt:
Kommen wir ohne weitere Umschweife direkt zum 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>Verwandte Empfehlungen:
JavaScript zur Implementierung personalisierter Navigationsleisten-Spezialeffekte
Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel dafür, wie jQuery die Methode zum Ändern der Farbe des Menüelements in der Kopfzeile der Navigationsleiste implementiert, nachdem darauf geklickt wurde. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!