Changer de classe d'élément après un clic d'une page précédente

Je suis coincé depuis longtemps donc je voudrais de l'aide pour résoudre mon problème.Changer de classe d'élément après un clic d'une page précédente

J'ai 2 pages. De la première page A, j'ai <a href> ce lien vers une autre page. Voici le lien:

<div class="sucre" id="sucreFirst"><a href="ecole2.html"><img src="_img/slide06.jpg" width="634" height="308" alt=""/></a></div>

autre page B, j'ai un menu qui se masquer et afficher le contenu cep CSS classe. Voici le code pour le menu:

<div id="menu_G"> 
    <p><a href="#" onClick="document.getElementById('Titre1').className='ON';document.getElementById('Titre2').className='OFF';document.getElementById('Titre3').className='OFF'">Le mariage de 2 expériences</a></p> 
    <p><a href="#" onClick="document.getElementById('Titre1').className='OFF';document.getElementById('Titre2').className='ON';document.getElementById('Titre3').className='OFF'">Né d'une conviction</a></p> 
    <p><a href="#" onClick="document.getElementById('Titre1').className='OFF';document.getElementById('Titre2').className='OFF';document.getElementById('Titre3').className='ON'">Des DRH militants</a></p> 
    </div>

Comme vous pouvez le voir, le page B est configuré pour afficher la première titre1.

<div class="ON" id="Titre1">content</div> 
<div class="OFF" id="Titre2">content</div> 
<div class="OFF" id="Titre3">content</div>

Quand je clic sur le lien de la page A Je l'aime changer la propriété de la classe titre3-ON.

Pour résumer, quand je clique sur le lien de page A je voudrais montrer le titre3 contenu de page B.

J'ai essayé beaucoup de choses, mais elles sont toujours liées à titre1.

Merci pour la lecture,

Alfred

Source

2016-12-05 Alfred Wallace

Dans le code que je poste, j'oublie de mettre l'ancre sur # Titre3. –

Votre question n'est pas claire pour moi. Peut-être que vous pouvez me montrer un violon? – user2507

Je recommanderais de refactoriser ces appels de script document.getElem ... dans un fichier .js, et d'appeler "onClick" pour tous les boutons. Vous pouvez obtenir l'identifiant de currentTarget et y faire votre manipulation de classe, ce qui vous donnera probablement une idée plus claire de ce qui se passe. Que ce soit important ou non dans votre contexte, le code tel qu'il est écrit serait considéré comme un "spaghetti". –

Eh bien, vous avez plusieurs façons de Acheive votre objectif, donc je vais vous donner une idée et un point de départ. Ce que vous avez réellement besoin de faire est de transférer des informations de la page source à la page cible, les informations transférées seront l'élément à activer et les éléments à désactiver.

L'un des moyens simples d'envoyer des données entre les pages est d'utiliser une chaîne de requête d'URL. Vous pouvez créer la chaîne de requête en l'ajoutant simplement au lien.

Modifier votre lien vers:

href="ecole2.html?on=1&firstOFF=2&secondOFF=3"

La partie de la ? est la chaîne de requête, sa structure est:

?key=value&key=value&key=value...&key=value

Maintenant, lorsque vous entrez ecole2.html avec ce lien, vous ll sera en mesure d'obtenir ces 3 variables (on, firstOFF et secondOFF) par un analyseur de chaîne de requête (you have many ways to do it).

Créer une fonction qui obtenir les paramètres et définira la visibilité sur eux, quelque chose comme:

function setVisibility(onElement, firstOffElement, secondOffElement) 
{ 
    document.getElementById(onElement).className='ON'; 
    document.getElementById(firstOffElement).className='ON'; 
    document.getElementById(secondOffElement).className='ON'; 
}

appeler cette fonction à chaque paramètre lorsque la page se charge (événement onload) et vous avez terminé.

<body onload="setVisibility(on, firstOff, secondOff)">

quand on sera par exemple la chaîne "Titre"+onParsedVariableFromQueryString

Here is a jsdiffle avec une fonction d'URL d'analyse syntaxique et l'analyse réelle de trois variables définies de la même manière expliquée ci-dessus. Comme la question ne concerne pas directement l'analyse d'URL, je ne vois pas la nécessité d'afficher le code de la méthode d'analyse ici.

Avec la logique et les exemples ci-dessus, je suis sûr que vous pouvez progresser par vos propres moyens.

Source

2016-12-05 17:23:21

Merci @Alon_A, ça sonne vraiment bien. Je vais essayer ça demain matin. J'ai lu attentivement et je vais probablement avoir des questions sur ** l'analyse de l'URL ** pour aller plus loin. Comme vous l'avez dit, je devrais progresser. –

Bonjour, j'ai testé votre solution. Mais peut-être que j'ai raté quelque chose parce que cela ne change pas la classe ** Titre3 à ON **. J'ai modifié le href comme ceci: ''. J'ai mis le Titre3Elemen sur ON: 'function setVisibility (onElement, firstOffElement, secondOffElement) { document.getElementById (Titre3Element) .className = 'ON'; document.getElementById (Titre2Element) .className = 'OFF'; document.getElementById (Titre1Element) .className = 'OFF'; } '. Et enfin ajouter ** pageB **: '. Une idée ? Merci –

J'ai modifié mon code. C'est mieux que je pense mais je ne travaille toujours pas. J'ai modifié le href comme ceci: ''. J'ai mis le Titre3 à ON: 'function setVisibility (Titre3, Titre2, Titre1) { document.getElementById (Titre3) .className = 'ON'; document.getElementById (Titre2) .className = 'OFF'; document.getElementById (Titre1) .className = 'OFF'; } '. Et enfin ajouter ** pageB **: '. Une idée ? Merci –

Changer de classe d'élément après un clic d'une page précédente

Répondre

Questions connexes