18041 sujets

Questions générales et questions de débutants

Onglet d'un menu actif quand on a cliqué dessus : PB Javascript

Bonjour, je suis en train d'adapter un thème tumblr et je suis bloqué (je suis une quiche en code). J'ai récupéré un menu qui marche bien et je voudrais que lorsqu'on clique sur un onglet de menu celui-ci soit affiché comme actif. Comme il n'y a pas de catégories sur tumblr, il faut faire un script javascript ou Jquery je crois, j'ai cherché à adapter ceux que j'ai trouvé mais je n'y parviens pas. Je précise que je veux pas trop toucher au css du menu car c'est bien calé.

Le menu css fonctionne sur ce principe :


.sidebar a {
  		display: block;
  		color: black;  		
}
.sidebar a.active {
  		background-color: #5698b8; 	
}

.sidebar a:hover:not(.active) {
        background-color: #cccccc;	
}


le HTML du menu :
 
<div class=sidebar>
<a href="#">lien</a>
<a href="#">lien</a>
<a href="#">lien</a>
</div>


J'ai trouvé ce javascript mais qui fonctionne avec des listes et je n'arrive pas à l'adapter à mon problème :


$(document).ready(function(){
  $('ul li a').click(function(){
    $('li a').removeClass("active");
    $(this).addClass("active");
});
});


voici le lien vers mon blog : http://datapolitics.tumblr.com
Modérateur
Salut,

Pour l'adaptation du petit bout de Js j'aurais dit :
$(document).ready(function(){
  $('.sidebar a').click(function(){
    $('.sidebar .active').removeClass("active");
    $(this).addClass("active");
});
});

https://jsfiddle.net/undless/kLzofxbm/2/

Tu as bien JQuery en place sur ton site ?
Modifié par _laurent (10 Jan 2019 - 17:12)
Et non je n'avais pas appeler JQuery, comme je peux pas l'uploader j'ai essayé en lien externe et avec ton code mais ça ne marche non plus

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">

$(document).ready(function(){
  $('.sidebar a').click(function(){
    $('.sidebar .active').removeClass("active");
    $(this).addClass("active");
});
});
</script>
On progresse merci ! Mais l'onglet ne reste toujours pas actif un fois qu'il a été cliqué. Je voudrais qu'il reste en bleu quand on a cliqué sur une rubrique : http://datapolitics.tumblr.com

J'en suis là :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('.sidebar a').click(function(){
    $('.sidebar active').removeClass("active");
    $(this).addClass("active");
});
});
</script>

Modifié par Datapolitics (10 Jan 2019 - 18:15)
Modérateur
Hahahaha c'est un autre soucis ça !

Quand tu cliques sur les liens tu change de page donc le code se réinitialise.
Le code Js ne va avoir d'effet que dans la page chargée, pas entre les pages.

La ce que tu veux faire c'est ajouter la classe "active" sur l'onglet ou on se situe dès notre arrivée sur la page.

C'est un menu commun à toutes les pages ? Tu peux y mettre un peu de php ? En Js ca doit peut-être etre faisable mais je ne sais pas faire là desuite (et je ne sais pas si c'est une bonne pratique de faire ca en JS)
Aïe ça me dépasse, avez vous une piste au niveau du code que je dois intégrer ? Désolé mais je suis pas codeur... Je vais essayer d'avancer quand même en étudiant cette histoire de cookies Smiley smile
Je tâtonne, j'ai essayé ça mais ça ne fonctionne pas, pourriez-vous m'aiguiller plus car ça me dépasse Smiley decu 

<script>
$(document).ready(function(){
  $('.sidebar a').click(function(){
    $('a')localStorage.setItem("a");
    $('a').removeClass("active");
    $(this).addClass("active");
    $('a')localStorage.getItem("a");
    $(this).addClass("active");
});
});
</script>
Modérateur
Mmmmm,

Tu es sur d'avoir lu l'article en entier ?

a écrit :
Stockage
sessionStorage.setItem("couleur","vert");

Récupération
var couleur = sessionStorage.getItem("couleur");

Suppression
sessionStorage.removeItem("couleur");

C'est la même chose pour localStorage.

Si tu veux enregistrer une valeur tu fais :
localStorage.setItem("menuactif","nom à enregistrer");


Et pour récupérer la valeur :
var menuactif = localStorage.getItem("menuactif");


Pourquoi tu as tout mis dans le click ?
Pourquoi tu as mis $('a') devant localStorage ?
Ôte moi d'un doute : tu tentes plein de choses sans savoir ce que tu fais ni ce que veut dire le code ? Smiley lol

Il faut commencer par mettre à plat ce que tu veux faire. L’enchaînement des événements. Et ensuite le transformer en code.
Modifié par _laurent (11 Jan 2019 - 13:52)
Je suis bloqué et je n'ai pas les compétences, j'ai décrit mon profil et ce que je cherche à faire dans mon message initial. Je pensais que quelqu'un pourrait me fournir le script complet à intégrer, je suis pas du tout codeur, j'essaye juste de me débrouiller avec mes moyens
Modifié par Datapolitics (11 Jan 2019 - 14:18)
Modérateur
Bonjour,

Quelque chose du genre :
EDIT: correction du bug sur la dernière ligne
EDIT2: suppression du code qui en fin de compte ne marchait pas
Voir les posts plus loin pour avoir un code qui marche peut-être.

Amicalement,
Modifié par parsimonhi (11 Jan 2019 - 17:30)
Modérateur
Datapolitics a écrit :
Je suis bloqué et je n'ai pas les compétences, j'ai décrit mon profil et ce que je cherche à faire dans mon message initial. Je pensais que quelqu'un pourrait me fournir le script complet à intégrer, je suis pas du tout codeur, j'essaye juste de me débrouiller avec mes moyens

Ha ! Bah du coup ca change tout j'avais pas compris ça et comme je suis plutôt dans l'optique d'encourager les gens a trouver la solution seul plutot que de proposer la solution toute prete.....

Du coup voila le code :

$(document).ready(function(){

	// On récupère le local storage
  var menuactif = localStorage.getItem('menuactif');

	// Si le local storage n'était pas défini (= premiere visite) on lui donne par défaut le premier menu
  if ( menuactif === 'undefined' ) {
    menuactif = 'menu1';
  }
  
  // On ajoute la classe active au lien enregistré
  $('#'+menuactif).addClass('active');
  
  // au click
	$('#menu a').click(function(){
  	// On enleve toutes les classes actives
    $('#menu .active').removeClass('active');
    // On ajoute la classe active sur l'élément cliqué
    $(this).addClass('active');
    // On enregistre l'id de l'élément cliqué dans le local storage
    localStorage.setItem('menuactif',this.id);
	});
});


https://jsfiddle.net/undless/kLzofxbm/23/

Par contre, vu qu'il s'agit de liens, je ne sais pas si le local storage va avoir el temps de s'enregistrer avant le changement de page....



A tester donc...


[EDIT]

Le HTML avec les id ajoutés :

<div id="menu" class=sidebar>
<a id="menu1" href="#">lien</a>
<a id="menu2" href="#">lien</a>
<a id="menu3" href="#">lien</a>
</div>


[/EDIT]
Modifié par _laurent (11 Jan 2019 - 15:32)
Modérateur
Bonjour,
_laurent a écrit :
Du coup voila le code ...

Il me semble que le lien cliqué n'est pas forcément un des liens du menu.

Amicalement,
Modérateur
parsimonhi a écrit :
Il me semble que le lien cliqué n'est pas forcément un des liens du menu.


Ah ! J'avais pas vu que tu avais aussi posté du code parsimonhi. Désolé.
Heu bah moi j'avais compris au contraire que c'était spécifique à la navigation contenu dans sidebar (sinon c'est un peu violent de faire ça sur tout les <a> de la page non ?). Il choisira au pire Smiley lol

Bonne soirée
Modifié par _laurent (11 Jan 2019 - 16:14)
Modérateur
Bonjour,
_laurent a écrit :
Ah ! J'avais pas vu que tu avais aussi posté du code parsimonhi. Désolé.

De rien, de toute façon, mon code ne marchait pas !

Ma mère me l'a pourtant répété 100 fois : tu ne posteras pas un code que tu n'as pas testé.

J'ai donc bataillé pour extraire de tumblr des portions de code afin de tester. Et j'ai fini par obtenir ça (sous réserve car j'ai dû retirer pas mal de code pour faire mon test) :
// on ajoute une action lorsqu'on clique sur un lien quelconque
// si le lien est un lien du menu, 
// on stocke ce lien dans localStorage
// si le lien n'est pas un lien du menu,
// on stocke le lien actif du menu dans localStorage (à adapter si on veut un autre comportement)
	$('a').click(function(){
		var a;
		if ($(this).is('.sidebar a'))
			a = $(this).attr('href');
		else
			a = $('a.active').first().attr('href');
		localStorage.setItem("a",a);
	});
$(document).ready(function(){
	// après le chargement de chaque page
	// (donc rien à voir avec ce qui se passe lors d'un click)
	// si on a quelque chose dans localStorage,
	// on retire la classe active
	// on ajoute la classe active au lien qu'on a stocké dans localStorage
	var z = localStorage.getItem("a");
	if (z)
	{
		$('a').removeClass("active");
		$('a[href="' + z + '"]').first().addClass("active");
	}
});

Amicalement,
Meilleure solution
Bonjour, c'est fantastique ça marche ! Je vous remercie tous pour votre aide précieuse je suis trop content Smiley smile
Sujet clos
Aller à