Comment insérer un gestionnaire onclick dans une balise <a> ?

[rdtech]

Bonjour, je travaille avec Joomla 3.8 en local et dans le template Protostar, sur une ligne <a href="/joomla_3.8.5-bts-sn/index.php/accueil">Accueil</a>, j'ai besoin d'insérer un onclick=chgbg() pour modifier la couleur de fond d'un titre en même temps. Comment peut-on faire cela ? Merci.

[cavo789]

Bonjour

Intéresse-toi à jquery et son évènement onclick() qui fait exactement cela.

[rdtech]

Bonjour cavo789 et merci pour cette réponse,
j'ai extrait "jQuery: le guide complet" de la bibliothèque de la boîte pour ma soirée.
En fait, c'est où placer cet évènement click dans le html de mon site qui me pose problème pour l'instant. Une fois que j'aurai validé ça, j'attaquerai avec le code à placer derrière.

Merci.

[cavo789]

On parle bien de joomla n'est-ce pas ? Tu peux utiliser l'excellent UP de lomart, voir https://up.lomart.fr/demo/action-addscript

[cavo789]

Je relis ton message et tu parles de ton template : vois si tu as la possibilité d'ajouter ton code dans un fichier nommé custom.js

Le plugin de Loïc est adapté si tu souhaites faire cela dans un article ou un module mais dans ton cas, custom.js sera le plus adapté

[rdtech]

bonjour,
pas de custom.js mais j'ai un fichier template.js dans lequel j'ai commencé à écrire:

(function($)
{
    $(document).ready(function()
    {
        var elm = $('div.well ul li');
        elm[0].onclick = set_bgndSni;  //installation du gestionnaire de click

et ma fonction set_bgndSni qui doit changer la couleur de fond d'un élément li:

function set_bgndSni()
{
    //var target = $('div.nav-collapse ul li');
    var target = document.querySelector("li.item-101");
}

La fonction set_bgndSni est bien appelée mais j'ai l'erreur: TypeError: $ is not a function et ça me complique bien la vie.
Est-elle mal placée dans le fichier ? J'ai tenté un passage en argument mais pas mieux...

Merci.

[cavo789]

Bonjour

À la lecture du message d'erreur, je me demande juste si : as-tu vérifié que jQuery est bien chargé par ton site ? C'est vraiment rare que cela ne soit pas le cas mais le message d'erreur retourné est cependant assez explicite.

Pour ton code, j'aurais plutôt commencé comme ceci :

$(document).ready(function() {
    $("div.well ul li").click(function() {
        // Écrire le code pour changer le background
    });
});

Ce code est plus "direct".

(*non testé*)

[lomart]

Bonjour,
+1 avec Christophe
Par contre, le fond est a changer sur toutes les pages ou juste sur l'accueil ?
SI c'est sur toutes les pages, il faut le faire en CSS
Si c'est juste sur l'accueil, il faut utiliser un sélecteur plus que div.well ul li
ou utiliser le code dans un module publié uniquement sur cette page
ou utiliser UP dans l'article accueil
ou je n'ai vraiment rien compris

[lefabdu51]

bonjour,
pour info:
sous protostar, il est possible de créer un fichier custom.js pour les scripts et fonctions javascript personnalisés.
Mais dans ton cas et vu la fonction, je collerais directement la fonction dans une balise script située entre les balises head du fichier index.php du template.
ton lien :
<a href="/joomla_3.8.5-bts-sn/index.php/accueil" onclick="chbg();">Accueil</a>

une question cependant : est ce un lien de menu que tu cherches à modifier ?
Si c est le cas, la procédure est autre.

[rdtech]

Bonjour et merci pour vos réponses.
je travaille en local pour l'instant et je ne peux donc pas vous présenter l'état de mon projet. De plus, je me rend compte que je n'ai pas le vocabulaire du développeur web pour m'expliquer. D'où la photo qui suit:

























BTS SN, BTS SN option Informatique et Réseaux, ... sont des liens dans des balises <li> qui permettent d'accéder aux pages d'accueil correspondantes. Leur couleur de fond passe en bleu lorsqu'elles sont actives.
Quand je clique sur Accueil ou Année 1, etc... de chaque section dans le menu de droite, le <div> sous la photo affiche les infos nécessaires et j'aimerais que la balise <li> qui correspond garde sa couleur de fond bleu.
Pour l'instant, c'est tout ce que je veux faire du point de vue des fonctionnalités.

cavo789: merci pour l'exemple. Effectivement, jQuery n'est pas chargé.

if(!$)
    alert("not $");

Dans ma fonction set_bgndSnir(), le pop-up alert s'ouvre.
En attendant vos commentaires, je continue mes recherches.

[Eddy.vh]

Bonjour.

Normalement un lien de menu actif (en cours) prend une classe "active", il devrait suffire de formater cette classe (en ciblant au besoin) pour lui donner sa couleur (ou autre).

[rdtech]

Bonjour Eddy,
je viens de voir que le lien BTS SN non activé, la balise <li> porte les éléments suivants:

<li class="item-101 default"><a href="/joomla_3.8.5-bts-sn/index.php">BTS SN</a></li>

alors que quand je clique dessus et qu'il est actif, l'élément <li> devient:

<li class="item-101 default current active"><a href="/joomla_3.8.5-bts-sn/index.php">BTS SN</a></li>

donc la classe change. Est-ce qu'il y a moyen de substituer une classe par une autre quand je vais cliquer sur mon lien Accueil par exemple?
J'ai tendance à me répondre que oui puisque BTS SN étant actif avec un fond bleu, un clic sur BTS SN option Informatique et Réseaux fait passer son fond en bleu et change en blanc celui de BTS SN ceci apparemment par un changement de classe.
C'est pas simple mais je persévère.

[Eddy.vh]

La classe "avtive" est normalement activée pour tout lien de menu lorsqu'il est actif.

Il ne devrait rester qu'à formater cette classe dans ta cas, voire dans un custom.css pour garder les modif même après une mise à jour du template.