Changer class active selon la provenance du visiteur

Bonjour
Il y a peut être des sujets similaires ici, mais je ne les aient pas trouvé.
Pour être franc, je ne sais pas trop formuler avec les mots justes ce que je recherche.
Je vais donc vous expliquer avec un exemple :
#1
Dans le général , j'ai une page sur laquelle j'ai codé une tabs du genre de celle ci ( https://www.elated.com/res/File/articles/development/javascript/document-object-model/javascript-tabs/javascript-tabs.html ). Donc différent petits onglets. C'est une page que j'ai appelé "Photos".
Dans la tab, donc 4 onglets : Toutes, pension, pensionnaire, autre.
La tab active par défaut (a l'ouverture de la page photos est "toutes").

Jusque la, tout va bien

#2
J'ai créé juste en dessous de la tabs (sur la même page) un lien (ou bouton) qui a pour effet (lors du clic) d'afficher et de rendre active la tab 2 (soit pension).
La encore tout va bien.

#3
La partie #2 n'était qu'un test. J'aimerais vraiment avoir un lien pointant vers la page photos depuis une page qu'on pourrait appeler "contacts"

Ce que je voudrais (et que je n'arrive pas a faire), c'est simplement d'avoir la class "pension" de ma tab active quand le visiteur vient de la page "contacts", sinon il faudrait laisser la class "toutes" active.

Voila c'est un peu tarabiscoté, mais y a t'il une solution ?

Voici mes codes :

Etape #1 :

<div class="tab">
<button class="tablinks" onclick="openPhotoscat(event, 'toutes')" id="defaultOpen">Toutes</button>
<button class="tablinks" onclick="openPhotoscat(event, 'pension')">pension</button>
<button class="tablinks" onclick="openPhotoscat(event, 'pensionnaires')">pensionnaires</button>
<button class="tablinks" onclick="openPhotoscat(event, 'autres')">Autres</button>
</div>

<div id="toutes" class="tabcontent">
<span onclick="this.parentElement.style.display='none'" class="topright">&times</span>

.........................

</div>

<div id="pension" class="tabcontent">
<span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
.......................

</div>

<div id="pensionnaires" class="tabcontent">
<span onclick="this.parentElement.style.display='none'" class="topright">&times</span>



..................
</div>

<div id="autres" class="tabcontent">
<span onclick="this.parentElement.style.display='none'" class="topright">&times</span>



..................

</div>


Etape #2 :

<script>
function openPhotoscat(evt, photosCat) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent.style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks.className = tablinks.className.replace(" active", "");
}
document.getElementById(photosCat).style.display = "block";
evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

Lien test sur la même page (qui fonctionne):

<a href="#" onclick="openPhotoscat(event, 'pension')">test</a>

Maintenant comment avoir le même résultat que ce dernier lien en arrivant depuis une autre page (la page qui sommes nous, ou accueil peu importe) ?

Pour information, je code pour un site sous wp, je ne sais pas si ca aura une incidence ou pas ?

Si vous avez des pistes, des liens ou une aide, je suis preneur ?
J'ai essayé mais ca ne fonctionne pas :

<a href="http://www.monsite.bzh/photos/" onclick="openPhotoscat(event, 'pension')">test</a>

Merci d'avance (et bonne année)
Galahan

Salut Galahan et bienvenu sur le forum !
Tu peux arriver à ton résultat, si j'ai bien compris, en faisant passer un paramètre dans l'url de ta page photos (ou un hash #).
Par exemple

<a href="http://www.monsite.bzh/photos?active_tab=pension">test</a>

Ensuite, dans ta page photos, tu récupères ce paramètre d'url en JS si tu veux garder ton script JS et tu exécutes qqchose en fonction de ton paramètre.

Je suis dispo si besoin de plus d'explications.
Matthieu

Salut,

Dans les boucles for, il te manque des [ i ] après tabcontent et tablinks
Ensuite tu peux regarder de ce coté : https://developer.mozilla.org/fr/docs/Web/API/Element/classList , je pense que ça serait plus propre d'utiliser add et remove ou toogle que de la manipulation de chaîne vi className

Ensuite tu dois pouvoir facilement adapté ton click pour qu'il récupère un paramètre de l'url au lieu de toujours le faire sur defaultopen

Après en regardant à la va vite sur internet on trouve des solutions en css qui sont assez sympa, par exemple : https://codepen.io/josh_vogt/full/EaaZbP

Bon courage
Modifié par _laurent (13 Jan 2020 - 17:38)

Salutations.
Je m'excuse du retour tres tres tardif mais j'ai eu pas mal de choses a gérer.
Merci pour ces réponses, mais je n'ai pas trouvé ma solution. Il est possible (pour ne pas dire sur) que je n'ai pas encore les compétences pour bien appliquer ce que vous m'avez dit.
J'ai pourtant passé des heures dessus, en imaginant toutes les possibilités.
Je vais encore chercher, mais je tenais a vous remercier pour vos réponses
#Merci