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

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)

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)

Oui c'est un menu commun à toutes les pages. Je ne peux pas faire de php c'est un blog Tumblr

Dans ce cas il est possible d'enregistrer le dernier onglet actif en javascript d'une page à une autre, soit via un cookie, soit via local storage.

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

Essaie avec le local storage alors c'est assez simple : https://www.alsacreations.com/article/lire/1402-web-storage-localstorage-sessionstorage.html

Je tâtonne, j'ai essayé ça mais ça ne fonctionne pas, pourriez-vous m'aiguiller plus car ça me dépasse

<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>

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 ?

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 journaliste, mais j'essaye d'adapter mon blog, je galère d'où mon besoin d'aide

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)

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)

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)

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,

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

Bonne soirée
Modifié par _laurent (11 Jan 2019 - 16:14)

Merci à tous ! Je teste fès que je rentre dimanche ! Bon week-end

Bonjour, c'est fantastique ça marche ! Je vous remercie tous pour votre aide précieuse je suis trop content