Les liens de mon menu ne fonctionne pas (javaScript, Html)

Bonjour, alors voila j'ai créer un menu qui est dynamique a chaque clique le bouton actif ce dépasse et en effet il se trouve que le problème vient de là car en faisant des test les liens ne marche que quand j'enlève un bout de code JAVASCRIPT mais ce bout de code permet de dynamisé mon menu je veux donc pas le supprimer, je sais pas du tout comment faire ;( si vous avez une idée de comment je peux avoir et mon menu dynamique et mes liens qui fonctionne ou bien si il ya une autre solution d'appeler une autre page a l'aide de lien cacher (php, html, javascript,css ..)
je vous met mon code html ci dessous et le java script par la suite
HTML:

<nav class="tabs"> 			
				<div class="selector"></div>
				<a href="../pages/accueil.php" class="active"><i class="fas fa-broadcast-tower fa-lg"></i> Accueil </a>				
				<a href="../pages/nouvelleActivite.php"><i class="fas fa-th-list fa-lg"></i> Toutes Les Activités </a>
				<a href="#"><i class="fas fa-pencil-alt fa-lg"></i> Nouvelle Activité </a>
				<a href="#"><i class="fas fa-chart-bar fa-lg"></i> Statistique </a>
				<a href="../index.php"><i class="fas fa-user-slash fa-lg"></i> 
                               Déconnexion </a>
</nav>

code JAVASCRIPT :

<script>
	var tabs = $('.tabs');
	var selector = $('.tabs').find('a').length;
	var selector = $(".tabs").find(".selector");
	var activeItem = tabs.find('.active');
	var activeWidth = activeItem.innerWidth();
	$(".selector").css({
	  "left": activeItem.position.left + "px", 
	  "width": activeWidth + "px"
	});

	$(".tabs").on("click","a",function(e){	 
	  e.preventDefault();	  
	  $('.tabs a').removeClass("active");	  
	  $(this).addClass('active');	  
	  var activeWidth = $(this).innerWidth();	 
	  var itemPos = $(this).position();	  
	  $(".selector").css({		 
		"left":itemPos.left + "px", 		 
		"width": activeWidth + "px"		
	  });
	});
</script>	

Salut,

Il y a quelques incohérences dans ce que tu tentes de faire.

On commence par le fait que les liens ne sont plus cliquables. Est-ce que tu as un idée de pourquoi tu as mis ça :

e.preventDefault();

J'imagine que non

W3Schools a écrit :
The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur.
For example, this can be useful when:
- Clicking on a "Submit" button, prevent it from submitting a form
- Clicking on a link, prevent the link from following the URL

https://www.w3schools.com/jsref/event_preventdefault.asp
Donc effectivement quand tu clic sur un lien ca empêche d'ouvrir le lien.

Ensuite, a plus haut niveau, tu le remarqueras par toi même je pense mais une animation Js sur un menu avec des liens c'est un peu incompatible... quand tu auras résolu ton soucis tu verras qu'au clic sur un lien ta page va changer / se recharger sans faire attention à l'animation (donc avant, pendant ou après l'animation si elle est rapide) et sans garder l'état du menu sur la nouvelle page (il se remettra a 0 d'un coup vu que la page se recharge).
Pour avoir un menu animé en JS il faut que le changement de page se fasse également en Js et sans reload de la page entière, c''est un peu plus compliqué a faire.

Bonne journée

Bonjour, merci infiniment pour votre réponse je comprends mieux maintenant....
En effet le fait de créer des liens en html sur un menu fait js c‘Est pas bon du tout ...
Pouvez vous m’indiquer où est-ce que je dois mettre mes liens en js ??? A quel endroit dans mon code

Merci d’avance ,

Salut,

LenaMora a écrit :
où est-ce que je dois mettre mes liens en js ?

Je suis désolé mais je ne suis pas sur de comprendre cette question.. qu'est-ce que tu appelles des "liens en Js" ? Tu veux parler d'un changement de page en Js sans recharger la page comme j'ai suggéré ? Si c'est ça, comme je l'ai dit dans ma réponse, c'est "un peu plus compliqué" et c'est un euphémisme j'ai envie de dire. Ca implique beaucoup de changements par rapport a un site "normal". Et ca peut aller plus ou moins loin techniquement, le plus basique étant d'avoir tout le contenu dans 1 seule page et masquer/afficher les sections en Js grâce au menu (et toutes les contraintes que ca entraine si on rajoute pas plus de code : pas d'url différentes, SEO qui peut en prendre un coup, accessibilité, etc...).

En gros, pour moi, pour un site internet basique et sans connaissances poussées c'est une mauvaise idée de s'embarquer la dedans juste pour avoir des animations. Mais bon, je l'ai déjà fait sur mes premiers sites hein

Ou alors passer sur un site dit "one page" qui va scroller à la bonne section plutôt que changer de page et là tu pourra avoir des animations sur ton menu sans changer de page et sans pour autant avoir besoin de trop de "gestion" autour.

donc si je comprend bien c'est très compliqué d'avoir et mon menu dynamique et mes changement de pages à chaque clic ??

car j'ai vraiment envie de faire ça,
vous me dites que vous l'avez déjà fait pour vos sites
c'est possible d'avoir un exemple ? car j'ai vraiment aucune idée de comment changer ça

Merci d’avance ,

Salut !

Désolé pour le délai j'étais pris...
En fonctionnement de base c'est un peu comme des onglets ou un accordéon quoi :

<ul class="menu">
  <li class="menu-item" id="menu_1">Menu 1</li>
  <li class="menu-item" id="menu_2">Menu 2</li>
  <li class="menu-item" id="menu_3">Menu 3</li>
</ul>
<section class="section section-show" id="section_1">Contenu 1</section>
<section class="section" id="section_2">Contenu 2</section>
<section class="section" id="section_3">Contenu 3</section>

.section {
  display: none;
}

.section-show {
  display: block;
}

var menu = document.getElementsByClassName('menu-item');

for	(let i=0; i<menu.length; i++) {
  menu[i].addEventListener('click', function() {
    showContent(i+1);
  });
}

function showContent(item) {
  document.getElementsByClassName('section-show')[0].classList.remove('section-show');
	document.getElementById('section_'+item).classList.add('section-show');
}

Démo : https://jsfiddle.net/undless/vjcz0L9q/

Reste plus qu'a jouer avec le CSS pour les effets.

Mais juste comme ca c'est pas très abouti. Tout dépend de ton but comme je t'ai dit. Si tu veux juste un site tranquille pour toi ou si tu vises un truc plus pro.
Modifié par _laurent (22 Feb 2021 - 18:04)