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

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

小云云

Freigeben： 2017-12-31 16:42:34

Original

2124 Leute haben es durchsucht

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> 
  $(&#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>

Nach dem Login kopieren

Verwandte Empfehlungen:

JavaScript zur Implementierung personalisierter Navigationsleisten-Spezialeffekte

Beispielcode für JavaScript zur Implementierung exquisiter personalisierter Navigationsleisten-Saltos Wolkeneffekt

So implementieren Sie einen Link in der Navigationsleiste, um nach dem Klicken zu springen und dem entsprechenden Link auf der neuen Seite Farbe hinzuzufügen

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!