Mir gefallen einige Spezialeffekte sehr gut, und ich mag auch den Navigations-Klickeffekt einiger Unternehmenswebsites, aber egal, wie ich den Klickeffekt verwende, er ist nicht sehr ideal, also habe ich schließlich Probleme mit diesem Effekt Als ich JS-bezogene Änderungseffekte lernte, erkannte ich endlich das Unternehmen. Ein Beispiel für den Farbänderungseffekt beim Klicken auf den Verzeichnisnamen in der Site-Navigationsleiste. Lassen Sie mich unten meinen Operationscode teilen:
Zunächst zeige ich mein Finale Effekt, den jeder sehen kann:
Wie im Bild oben gezeigt, müssen wir den Effekt erzielen, den wir erzielen müssen. Wenn der Benutzer auf die entsprechende Navigationsleiste klickt, können wir die Farbe des Namens der entsprechenden Navigationsleiste ändern, um den Benutzer daran zu erinnern Seite, auf der sie sich gerade befinden.
Jetzt zeige ich Ihnen den HTML- und JS-Code, der den oben genannten Kollisionseffekt erzielt:
Zuerst zeigen wir den Front-End-HTML-Code:
<div>
<div>
<ul>
<li><a class="location now" href="{:U('Index/index')}">首页</a></li>
<li><a href="{:U('Index/product')}">产品展示</a></li>
<li><a href="{:U('Index/about')}">关于我们</a></li>
<li><a href="{:U('Index/news')}">新闻资讯</a></li>
<li><a href="{:U('Index/video')}">视频中心</a></li>
<li><a href="{:U('Index/contact')}">联系我们</a></li>
</ul>
</div>
</div>Dann zeigen wir den JS-Code:
<script type="text/javascript">
$(function () {
var url = decodeURI(location.pathname+location.search);
$(".location").each(function () {
if ($(this).attr('href') == url)
{
$(this).addClass('now')
}else {
$(this).removeClass('now')
}
})
})
</script>3. Code Analyse:
Vorderseite:
Das Element mit der Position des Klassennamens ist jetzt die Beschriftung mit der transformierten Farbe.
JS-Code:
decodeURI(): kann den von der Funktion encodeURI() codierten URI dekodieren.
location.pathname: Das erhaltene Ergebnis ist die vollständige Adresszeichenfolge in der Adressleiste des Browsers.
location.search: Was Sie erhalten, ist ? und alles danach?
Beispielanalyse:
Der aufgerufene URL-Pfad ist:
http://www.zywpro.com/Home/Index/about.html?id=1&name=wdy&password=password
location.pathname Das erhaltene Ergebnis ist :
http://www.zywpro.com/Home/Index/about.html?id=1&name=wdy&password=password
location.search Ergebnisse sind:
?id=1&name=wdy&password=password
every(): Gibt die Funktion an, die für jedes übereinstimmende Element ausgeführt werden soll. Die Rückgabe von „false“ kann verwendet werden, um die Schleife vorzeitig zu stoppen.
Beispiel:
Geben Sie den Text jedes li-Elements aus:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
});
</script>
</head>
<body>
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>attr(): Setzt den Attributwert des ausgewählten Elements oder gibt ihn zurück. attr (ein Wert gibt den Wert des ausgewählten Elements zurück, zwei Werte legen den Wert des ausgewählten Elements fest)
addClass(): Fügt dem ausgewählten Element eine oder mehrere Klassen hinzu.
removeClass(): Eine oder mehrere Klassen aus dem ausgewählten Element entfernen.
Okay, diese einfache Klicknavigation zum Erzielen eines Farbänderungseffekts ist realisiert. Obwohl sie sehr einfach aussieht, erfordert sie viel Front-End-Wissen, sodass wir jede einfache Sache ernst nehmen, egal wie kompliziert die Dinge sind Begegnung können wir Komplexität in Einfachheit verwandeln und das Problem auch besser und schneller lösen! Machen Sie weiter so, liebe PHP-Entwickler!
Das obige ist der detaillierte Inhalt vonJS-Implementierungsbeispiel für die Auswirkung des Klickens auf einen Verzeichnisnamen, um die Farbe zu ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
