Salut, 

J'ai un petit soucis avec mon porfolio...

Je m'explique : 

J'ai un index.php avec toutes mes "pages" dessus qui sont dans des div. Ces div sont en display:none avec le css. Avec du jquery j'affiche ma div d'accueil. lorsque que je clique sur un lien, la div d'accueil s'enlève avec du jquery et le .css et l'autre div sélectionner s'affiche. Jusque là, tout va bien. Le problème c'est que si je refresh ma page alors que je suis sur une autre div ma page d'accueil reviens mais mon autre div reste en dessous puisque mon url est devenu monsite.fr#madiv.

j'aimerais donc qu'au refresh de ma page je puisse changer mon url en juste monsite.fr

Problème : Comme tout est sur la même page index.php, ça refresh en boucle.

j'ai tester la meta refresh, le window.location.href, du setInterval... Bref j'arrive à rien.

Si quelqu'un connaissait la solution, je vous en serez trèèèès reconnaissant

Si jamais vous vouliez constater par vous même, voici l'adresse de mon site : vincent-boulard.esy.es

Si tu utilises un lien <a> pour afficher ton autre div, met lui un id, puis dans ton jQuery, ajoute

$('#IdDeTonLien').on('click', function(e) {
    e.preventDefault();
});

De cette façon, ton URL ne changera pas après un clic sur ce lien en particulier, d'où l'ajout d'un ID sur le lien.

Ça ne marche pas, quand j'appuie sur mon lien certes mon url reste le même mais du coup mon css ne fonctionne plus

Si ça peut aider, voilà le css qui gère l'apparition des pages

#div_cv, #div_veille_techno, #div_veille_juri, #div_projet, #div_contact {
	display:none;
}
#div_cv:target, #div_veille_techno:target, #div_veille_juri:target, #div_projet:target, #div_contact:target {
	display:inline;
}

Et voilà le JS qui me m'affiche l'index au début et le fait disparaitre au clique d'un lien :

$('#a_cv, #a_veille_techno, #a_veille_juri, #a_projet, #a_contact').click(function(){
	$('#div_index').css('display', 'none');
});
$('#a_index, #a_photo').click(function(){
	$('#div_index').css('display', 'inline');
});

Et pour finir ma div html avec mes liens :

<div class="collapse navbar-collapse" id="navbarSupportedContent">
	<ul class="navbar-nav">
		<li class="nav-item">
			<a class="nav-link js-scroll-trigger" href="#div_index" id="a_index">Accueil</a>
		</li>
		<li class="nav-item">
			<a class="nav-link js-scroll-trigger" href="#div_cv" id="a_cv">CV</a>
		</li>
		<li class="nav-item">
			<a class="nav-link js-scroll-trigger" href="#div_veille_techno" id="a_veille_techno">Veille technologique</a>
		</li>
		<li class="nav-item">
			<a class="nav-link js-scroll-trigger" href="#div_veille_juri" id="a_veille_juri">Veille juridique (bientôt disponible)</a>
		</li>
		<li class="nav-item">
			<a class="nav-link js-scroll-trigger" href="#div_projet" id="a_projet">Projets</a>
		</li>
		<li class="nav-item">
			<a class="nav-link js-scroll-trigger" href="#div_contact" id="a_contact">Contact</a>
		</li>
	</ul>
</div>

-
Edité par VincentBoulard2 22 janvier 2018 à 19:46:57

VincentBoulard2 a écrit:

Ça ne marche pas, quand j'appuie sur mon lien certes mon url reste le même mais du coup mon css ne fonctionne plus

Ce que je voulais dire, c'est que tu peux ajouter la ligne e.preventDefault() avant tes traitements, c'est-a-dire

$('#a_cv, #a_veille_techno, #a_veille_juri, #a_projet, #a_contact').click(function(e){
  e.preventDefault();
  $('#div_index').css('display', 'none');
});
$('#a_index, #a_photo').click(function(e){
  e.preventDefault();
  $('#div_index').css('display', 'inline');
});

-
Edité par Anonyme 23 janvier 2018 à 13:41:16