SquareSpace - Comment changer l'image dans la barre de navigation quand il est lié URL

Question

J'ai un peu de problème pour résoudre ce problème.

Je souhaite que les images de mon menu de la barre de navigation supérieure soient remplacées par des images différentes lorsque cette URL spécifique est utilisée pour cette page.

exemple; -

ACCUEIL - PROCESSUS - GALERIE - CONTACT

^en cliquant sur "PROCESSUS" il conduit à la/page processus^

Je veux obtenir ainsi le « PROCESSUS "image change du noir au gris et tous les autres restent noirs, cela montrera essentiellement l'utilisateur final quelle page ils sont actuellement -> « PROCESSUS »

Mon site actuel: https://alex-vreal.squarespace.com/

Ceci peut être assez simple mais juste avoir un temps frustrant le résoudre.

S'il vous plaît laissez-moi savoir comment je peux résoudre ce problème et ce que vous avez besoin de moi. Pourquoi ne pas simplement changer l'URL de l'image dans le code?

Answer 1

Vous pouvez le faire avec opacity.

Vous pouvez créer une fonction qui ajoute une classe appelée active à la balise li lorsque vous modifiez des pages sur votre site Web. Alors cette classe active aura un petit css.

Vérifiez cet exemple ci-dessous et dites-moi si ça aide

$(document).ready(function() { 
 
    $('.main-nav li a').click(function(e) { 
 

 
    $('.main-nav li.active').removeClass('active'); 
 

 
    var $parent = $(this).parent(); 
 
    $parent.addClass('active'); 
 
    e.preventDefault(); 
 
    }); 
 
});

.active { 
 
    opacity: 0.5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="main-nav dropdown-hover"> 
 
    <ul data-content-field="navigation"> 
 
    <li class=" external-link active"> 
 
     <a href="#"><img src="http://i.imgur.com/vyvR99Q.png" width="67" height="25"></a> 
 
    </li> 
 
    <li class=" external-link"> 
 
     <a href="#"><img src="http://i.imgur.com/0V4d6mS.png" width="98" height="25"></a> 
 
    </li> 
 
    <li class=" external-link"> 
 
     <a href="#"><img src="http://i.imgur.com/Rb64lhm.png" width="96" height="25"></a> 
 
    </li> 
 
    <li class=" external-link"> 
 
     <a href="#"><img src="http://i.imgur.com/qoHh0d8.png" width="102" height="25"></a> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 2

Sinon, il y a beaucoup de solutions pour le faire, en utilisant JS, ou CSS, ou même PHP, mais vous devez être plus précis sur ce que vous voulez faire.

Answer 3

Si vous avez HOME, PROCESSUS, GALERIE, CONTACT dans les articles de la liste li puis utilisez,

li: active {background-image: url (grey.jpg);}