Wechseln zwischen zwei Bildern mit einer einzelnen HTML-Datei

Question

Ich habe eine Top-Navigationsleiste, die zwei Webseiten gemeinsam ist, meine Stamm-URL (/) und erste Seite (/ erste Seite). In der oberen Navigationsleiste gibt es 2 Bilder und ich möchte zwischen diesen Bildern basierend auf der Seite, auf der der Benutzer ist, wechseln. -Code lautet wie folgt:

<img class="dark" src="/images/icons/IMAGE_home.png"> 
<img class="light" src="/images/icons/IMAGE1_page2.png"> 

Wenn der Benutzer auf der Homepage ist, sollte er das erste Bild sehen und der zweite versteckt werden soll. Wenn sich der Benutzer auf der zweiten Seite befindet, sollte er das zweite Bild sehen und das erste sollte versteckt sein.

Irgendwelche CSS/angular/Javascript-Tricks, um dies zu erreichen ?.

Vielen Dank im Voraus.

Answer 1

Normalerweise würde so etwas mit einem Backend-Skript gemacht werden, aber es ist sicherlich mit JavaScript und CSS möglich.

Zuerst stellte beiden Bilder standardmäßig ausgeblendet werden:

.light, .dark { 
    display: none; 
} 

Zweitens würden Sie die Seitennamen aus der URL erhalten müssen von window.location Überprüfung:

var path = window.location.pathname; 
var page = path.split("/").pop(); 

Sie dann würde prüfen müssen gegen die aktuelle Seite in einer Bedingung:

if (page == 'firstpage') { 
    document.getElementsByClassName("light")[0].style.display = 'block'; 
} 
else { 
    document.getElementsByClassName("dark")[0].style.display = 'block'; 
} 

Im obigen Beispiel wird /firstpageIMAGE1_page2.png haben, während jede andere Seite IMAGE_home.png haben wird. Die Wurzel (nur ein Schrägstrich) kann mit if (page) {} überprüft werden.

Hoffe, das hilft! :)

Answer 2

mit jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

JS:

$(document).ready(function() { 
    if (location.pathname == "/firstpage") { 
     $(".light").hide(); 
     $(".dark").show(); 
    } else { 
     $(".dark").hide(); 
     $(".light").show(); 
    } 
});