Page 1 sur 1

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

Posté : 11 déc. 2022, 04:13
par Vinch
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

Re: Menu Bootstrap remplacer class par script automatique

Posté : 11 déc. 2022, 09:26
par webmaster
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.

Re: Menu Bootstrap remplacer class par script automatique

Posté : 11 déc. 2022, 10:33
par Vinch
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

Re: Menu Bootstrap remplacer class par script automatique

Posté : 11 déc. 2022, 11:33
par webmaster
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

Re: Menu Bootstrap remplacer class par script automatique

Posté : 11 déc. 2022, 18:46
par Vinch
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

Re: Menu Bootstrap remplacer class par script automatique

Posté : 16 déc. 2022, 13:05
par Vinch
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

Re: Menu Bootstrap remplacer class par script automatique

Posté : 18 déc. 2022, 09:46
par Vinch
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

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

Posté : 25 déc. 2023, 04:21
par sarausa
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