[Résolu] Menu Bootstrap remplacer class par script automatique

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
Vinch
Messages : 6
Enregistré le : 11 déc. 2022, 04:02

[Résolu] Menu Bootstrap remplacer class par script automatique

Message par Vinch » 11 déc. 2022, 04:13

Bonjour à toutes et tous,
J’utilise un thème (Arsha) Bootstrap pour faire un site. Fichier de démonstration https://sumto.be/archives_presse/test_2.html
Dans cette page j’aimerais faire une « Revue de presse local ». Une liste ne contenant que des liens qui renvoi sur l’article en question.
Pour des raisons pratiques j’ai besoins d’aide pour :
Il y a une liste à onglets représentant les mois qui active un contenu en fonction du mois cliqué.

Ce que j’aimerais c’est que s’il n’y a pas de liens, l’onglet (les onglets) n’apparaissent pas, et que le premier onglet du mois en cours s’active automatiquement sans devoir préciser en html une class active tel que pour l’instant.

Code : Tout sélectionner

<li class="nav-item" role="presentation"><button class="nav-link [b]active[/b]" id="Octobre-tab" data-bs-toggle="tab" data-bs-target="#Octobre" type="button" role="tab" aria-controls="Octobre" aria-selected="false">Octobre</button>
  </li>
Dans le fichier de démonstration il y à un lien dans chaque mois excepté dans novembre et décembre, ceux si ne devrais donc pas s’afficher.

Ensuite j’aimerais ne pas devoir placer en HTML show active dans le contenu de l’onglet qui doit s’activer lors de l’ouverture de la page.

Code : Tout sélectionner

  <div class="tab-pane fade [b]show active[/b]" id="Octobre" role="tabpanel" aria-labelledby="Octobre-tab"><h2>Octobre</h2><a href="https://www.google.be/?hl=fr" target="_blank">https://www.google.be/?hl=fr</a></div>
Le menu 1 est presque bon mais il est là pour donner une idée de ce que j’aimerais pour le menu du dessous (revue de presses Aclote).
Merci pour votre aide.
Vincent
Modifié en dernier par Vinch le 18 déc. 2022, 09:47, modifié 1 fois.

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Menu Bootstrap remplacer class par script automatique

Message par webmaster » 11 déc. 2022, 09:26

Bonjour,

Probleme interessant lié à la conception globale d'un site.

Comment est générée la page ? Je suppose qu'il s'agit d'un langage serveur qui charge une base de données pour trouver les articles de la revue de presse.
Si c'est le cas, le plus simple et logique et d'adapter l'affichage des onglets à ce moment là. Dés qu'un contenu est trouvé, il faut lancer le show active sur l'onglet en question.
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Vinch
Messages : 6
Enregistré le : 11 déc. 2022, 04:02

Re: Menu Bootstrap remplacer class par script automatique

Message par Vinch » 11 déc. 2022, 10:33

Merci pour votre aide !
Quelques explications nécessaires :
Chaque jour une personne met des liens vers des articles d’autre site et ce manuellement en HTML.
Cependant elle ni connait rien et donc chaque mois elle devrait préciser quel onglet doit s’activer avec le contenu qui doit être ouvert (show) j’aimerais lui éviter cela comme pour le premier menu (menu 1) dont il faut juste préciser quel bouton doit être actif et ce manuellement en html. Et j’aimerais que cela, elle ne doive pas le faire non plus.
Et si cela était possible quand il n’y a pas de lien dans un contenu, l’onglet n’apparaisse pas.
Le script du menu 1 est :

Code : Tout sélectionner

	<script>
		$(function() {
			$('#onglets').css('display', 'block');
			$('#onglets').click(function(event) {
				var actuel = event.target;
				if (!/li/i.test(actuel.nodeName) || actuel.className.indexOf('actif') > -1) {
					alert(actuel.nodeName)
					return;
				}
				$(actuel).addClass('actif').siblings().removeClass('actif');
				setDisplay();
			});
			function setDisplay() {
				var modeAffichage;
				$('#onglets li').each(function(rang) {
					modeAffichage = $(this).hasClass('actif') ? '' : 'none';
					$('.item').eq(rang).css('display', modeAffichage);
				});
			}
			setDisplay();
		});
	</script>
Dans celui-ci il faut juste activer l’onglet manuellement en html mais pas le contenu qui s’affiche automatiquement.
Est-ce possible de le faire automatiquement du genre si pas de lien dans les div des mois suivant ne pas afficher les onglets et donc comme dans l’exemple de la page de démo les deux derniers mois Décembre et Novembre ne devraient pas s’afficher. Ceux-ci ne s’affichant pas le dernier onglet serait Octobre et s’afficherait automatiquement.
Du genre Si pas balise <a> dans contenu ne pas afficher onglet et contenu, afficher dernier onglet avec son contenu et rendre actif onglet.
Je ne suis pas sûr de bien me faire comprendre SRY.
Bien à vous
Vincent

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Menu Bootstrap remplacer class par script automatique

Message par webmaster » 11 déc. 2022, 11:33

Ok, dans ce cas, un script d'assistance est en effet le plus adapté.
C'est possible en JS de parcourir le contenu d'un bloc HTML pour voir ce qu'il contient avec childNodes :
https://www.toutjavascript.com/referenc ... dnodes.php
ou avec .each() de jquery comme dans le dernier script

Ca nécessite un peu de boulot quand meme. Je regarderai si je peux avancer la dessus la semaine prochaine
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Vinch
Messages : 6
Enregistré le : 11 déc. 2022, 04:02

Re: Menu Bootstrap remplacer class par script automatique

Message par Vinch » 11 déc. 2022, 18:46

Un tout grand merci à vous.
Je vais regarder le lien que vous me proposé qui sait... malgré mes compétence très limités je comprendrais quelque chose et en même temps j'en doute.
Bien à vous Olivier
Vincent

Vinch
Messages : 6
Enregistré le : 11 déc. 2022, 04:02

Re: Menu Bootstrap remplacer class par script automatique

Message par Vinch » 16 déc. 2022, 13:05

Bonjour à toutes et tous,

J'ai été voir ce que vous proposé, mais je n'y comprend pas grand chose.
Par contre j'ai continué mes recherche et en bidouillant le bazar j'arrive à certain "résultat"

Une partie du problème se résolve, le script ci-dessous permet de ne pas afficher l’onglet et son contenu tel que je le veux.

Code : Tout sélectionner

<script> $(document).ready(function() { 
  if ( $("#Décembre").text()){ 
    $('#Déc').show();
  } else { 
    $('#Déc').hide();
  }
 $('#Décembre').prepend('<h2>Décembre</h2>');
 
 if ( $("#Novembre").text()){ 
    $('#Nov').show();
  } else { 
    $('#Nov').hide();
  }
 $('#Novembre').prepend('<h2>Novembre</h2>')
 });</script>
Cependant je pense qu’il y aurait moyen de le simplifier du genre :

Code : Tout sélectionner

<script> $(document).ready(function() { 
  if ( $("#Décembre","#Novembre").text()){ 
    $('#Déc','#Nov').show();
  } else { 
    $('#Déc','#Nov').hide();
  }
 $('#Décembre', '#Novembre').prepend('<h2>Décembre</h2>', '<h2>Novembre</h2>')});</script>
J'ai essayé de plusieurs manière mais je n'y arrives pas.

Voici la page mis à jour : https://sumto.be/archives_presse/test_6.html
Dans celle-ci pour l’instant seul le mois de décembre et novembre son en test, ça fonctionne Nikel.
Dans le moi de Décembre il y à un lien et l’onglet s’affiche, pour le mois de Novembre il n’y à pas de lien et l’onglet ne s’affiche pas.

Par contre pour l’activation automatique de l'onglet, je n’ai pas d’idée…
Voilà ou j'en suis...
Bien à vous

Vinch
Messages : 6
Enregistré le : 11 déc. 2022, 04:02

Re: Menu Bootstrap remplacer class par script automatique

Message par Vinch » 18 déc. 2022, 09:46

Hello à toutes et tous
Le problème est résolu grâce à ce script :

Code : Tout sélectionner

$(function(){
	let indexItem=$('#contenu .item')
.map((index,item)=>{
	if($(item).find('[href]').length) return index;
}).get().shift();
$("#onglets .nav-link").eq(indexItem).addClass('actif');
$('#contenu .item').eq(indexItem).show();
	$("#onglets .nav-link")
	.click(function(){
		$(this).parent().children()
		.removeClass("actif")
		.parent().find(this)
		.addClass('actif');
 
		$("#contenu .item").hide()
		.parent().find('.item')
		.eq($(this).index()).show();
	})
	.each(function(index){
		if($("#contenu .item:eq("+index+") [href]").length==0){
			$(this).hide();
			$("#contenu .item").eq(index).hide();
		}
	});
});
Il fonctionne parfaitement avec la dernière lib de Jquery dans ce cas si : https://code.jquery.com/jquery-3.6.2.slim.min.js
Belle journée à toutes et tous
Vincent

sarausa
Messages : 3
Enregistré le : 25 déc. 2023, 04:15

Re: [Résolu] Menu Bootstrap remplacer class par script automatique

Message par sarausa » 25 déc. 2023, 04:21

L'un des avantages de ce changement est une flexibilité accrue : les scripts automatisés vous permettent de personnaliser les menus d'une manière qui n'est pas possible avec les cours. Par exemple, vous pouvez modifier le comportement du menu lors du survol ou du clic. slope

Répondre