Heim >Web-Frontend >js-Tutorial >JS-Implementierungsbeispiel für die Auswirkung des Klickens auf einen Verzeichnisnamen, um die Farbe zu ändern

JS-Implementierungsbeispiel für die Auswirkung des Klickens auf einen Verzeichnisnamen, um die Farbe zu ändern

眼眸间的深情Original: 2021-07-19 19:45:021545Durchsuche

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:

JS-Implementierungsbeispiel für die Auswirkung des Klickens auf einen Verzeichnisnamen, um die Farbe zu ändern 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(&#39;Index/index&#39;)}">首页</a></li>
            <li><a  href="{:U(&#39;Index/product&#39;)}">产品展示</a></li>
            <li><a  href="{:U(&#39;Index/about&#39;)}">关于我们</a></li>
            <li><a  href="{:U(&#39;Index/news&#39;)}">新闻资讯</a></li>
            <li><a  href="{:U(&#39;Index/video&#39;)}">视频中心</a></li>
            <li><a  href="{:U(&#39;Index/contact&#39;)}">联系我们</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(&#39;href&#39;) == url)
            {
                $(this).addClass(&#39;now&#39;)
            }else {
                $(this).removeClass(&#39;now&#39;)
            }
        })
    })
</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!

php html 循环 JS location li http

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So erstellen Sie eine Pikachu-Animation mit CSS+JS (Code-Analyse)Nächster Artikel：So erstellen Sie eine Pikachu-Animation mit CSS+JS (Code-Analyse)

In Verbindung stehende Artikel

Mehr sehen