Pour un travail scolaire, je dois créer une page qui change en fonction du lien cliqué.
Pour être plus clair, je pars d'une page avec différents liens dessus, et quel que soit le lien sur lequel je clique, cela amène à la même page html, mais son contenu doit changer en fonction du lien cliqué avec JavaScript.
Ce que je pensais être le moyen le plus simple, était d'obtenir l'identifiant du lien cliqué sur le clic, et, en fonction de cela, le contenu de la page changerait, mais je ne peux pas conserver cette valeur à travers les pages.
Avez-vous une idée? (Au fait, je suis autorisé à demander de l'aide pour ce projet).
3 Réponses :
Quelque chose comme ça devrait vous aider à démarrer.
<a href="bob" onclick="myFunc(event)">Bob</a> <a href="sam" onclick="myFunc(event)">Sam</a> <div id="msg"></div>
.wow{
width: 90%;
padding: 20px 50px;
margin-top: 20px;
font-size: 3rem;
color: firebrick;
background: wheat;
border:1px solid orange;
}function myFunc(e){
e.preventDefault();
let aa = event.target.innerText;
console.log(aa)
const msg = document.getElementById('msg');
msg.innerText = 'Hello: ' + aa;
msg.classList.add('wow');
}Cela semble être ce dont j'ai besoin, mais cela fonctionnera-t-il en modifiant les pages? Je veux dire, les liens, ici "Bob" et "Sam", sont href dans mes cas, donc le chargement d'une nouvelle page peut réinitialiser tout ça non?
Un exemple de base utilisant HTML et CSS pour afficher différentes parties de la page en fonction du hash .
<a href="#page1">Show Page 1</a><br> <a href="#page2">Show Page 2</a><br>
addEventListener("hashchange", function(event) {
console.log("Show Content for", location.hash);
}); Et un exemple basique utilisant l'événement hashchange .
<a href="#page1">Show Page 1</a><br> <a href="#page2">Show Page 2</a><br> <div class="page" id="page1"> <h2>Content 1</h2> </div> <div class="page" id="page2"> <h2>Content 2</h2> </div>
.page {
display: none;
}
.page:target {
display: block;
}Lorsque j'utilise cela, rien ne s'affiche dans la console lorsque nous changeons de page. Et c'est ce que j'essaye d'éviter
@Jo_Byr Le premier extrait de code est un exemple que vous pouvez réaliser complètement sans JS. Le deuxième exemple enregistre actuellement le changement de hachage. Là, vous pouvez remplacer le console.log par du code qui mettrait à jour la page.
J'ai mal compris votre question. Veuillez ignorer ma première réponse - mais je la laisserai là pour votre référence.
Ce que vous recherchez est appelé chaînes de requête (parfois appelées chaînes get). Les chaînes de requête sont ajoutées à l'URL au format:
let qs = window.location.search;
const urlParams = new URLSearchParams(qs);
const name = urlParams.get('name')
if (name === 'bob'){
alert('hi bob');
}
Donc, vous configureriez vos balises d'ancrage comme ceci:
<a href="next_page_to_view.html?name=bob">Bob</a> <a href="next_page_to_view.html?name=sam">Sam</a>
Sur l'autre page, next_page_to_view.html dans cet exemple, vous pouvez avoir un code similaire à:
https://example.com?varname=varvalue&nuthervar=different value
Utilisez l'exemple javascript fourni dans ma première réponse incorrecte pour schlep un message spécifique à l'utilisateur dans un div (au lieu du message alert ()).
https://www.sitepoint.com/get-url-parameters-with-javascript/
Existe-t-il une méthode pour obtenir l'URL sans chaîne de requête?
Désolé mais ce n'est pas ce dont j'ai besoin. J'ai besoin d'une page html modulable. Et vos propositions reposent sur 2. Je n'en ai vraiment besoin que parce qu'il y a 12 liens sur la page, donc je ne peux pas créer 12 pages qui sont presque les mêmes.
Ma première réponse supposait que vous mettiez à jour la même page qui contenait les liens. Cette réponse suppose qu'il existe une deuxième page vers laquelle tous les liens naviguent, et que vous souhaitez mettre à jour cette deuxième page différemment selon la chaîne de requête dans le lien cliqué. Peut-être ne comprenez-vous pas comment cette deuxième réponse vous permet de mettre à jour la next_page_to_view.html fonction du lien qui a été cliqué? Sinon, veuillez expliquer davantage pour m'aider à comprendre.
Donc, avec cette solution, je ne pourrais coder qu'un seul document html et le résultat dans le navigateur pourrait varier? Je suis désolé d'avoir du mal à comprendre, je code en HTML, CSS et JS depuis seulement 2 mois et je ne suis pas anglais donc c'est assez difficile de comprendre toutes les subtilités de vos réponses.
Votre question demandait deux pages, ai-je raison? Sur la première page, il y a plusieurs liens. Tous les liens envoient l'utilisateur ("naviguer") vers la deuxième page - mais ce qui est affiché sur la deuxième page dépend du lien sur lequel l'utilisateur a cliqué. Vous pouvez utiliser le code ci-dessus pour que cela se produise car chaque lien <a> a un href="" légèrement différent, utilisant des chaînes de requête. Sur la deuxième page, vous pouvez lire ceci via window.location.search . Vous pouvez analyser la chaîne de requête en utilisant URLSearchParams() . Et vous pouvez "obtenir" les parties souhaitées de la chaîne de requête comme indiqué ci-dessus. Meilleurs voeux avec votre projet
Parlons-nous d'une application d'une seule page? Vous pouvez utiliser la partie hachée de l'URL pour déterminer le contenu à afficher.
Il semble que vous ayez peut-être besoin de l' API d'historique . Mais veuillez clarifier un peu plus les exigences, car s'il ne s'agit que d'un simple contenu différent en fonction de l'url, il n'est pas du tout nécessaire d'utiliser l'API d'historique