[Résolu] Menu avec onglets en Jquery. Rendre onglet actif sans le préciser via une class en HTML.

[VlNCENT]

Bonjour à toutes et tous,

Un ami me demande de mettre à jour son site en responsive et a choisi un thème Bootstrap (Arsha) qui lui plait.

Le site est fini (pas encore en ligne) cependant j’ai un souci sur une page qui est une revue de presse.

Il ne veut pas de php et ne sait pas trop bien magner le HTML, mais suffisamment pour mettre des liens dans cette revue.

Tous les pages seront prêtes à l’avance et ce pour les vingt années qui suivent.

La revue de presse est un menu à onglets et j’aimerais que les onglets s’activent automatiquement sans devoir préciser en html celui qui doit être actif comme cela l’est actuellement, et ce pour éviter les erreurs et lui faciliter le travail.  

Il y à deux script Jquery qui fait fonctionner ce menu avec un peu de css.

Le premier permet que s’il n’y a rien dans la div qui contient le contenu de l’onglet en question, de ne pas afficher l’onglet.

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

Le second (celui qui me cause un souci) gère l’activation de l’onglet et le contenu de celui-ci, mais il faut le préciser en html avec la class actif. 

<li id="Nov" class="nav-link actif">Novembre</li>

<script>
        $(function() {
            $('#onglets').css('display', 'inline-flex');
                        $('#onglets').click(function(event) {
                var actuel = event.target;
                if (!/li/i.test(actuel.nodeName) || actuel.className.indexOf('actif') > -1) {
                }
                $(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>

Pas sur que je me fais bien comprendre...

Dans le fichier de démo test_7 Décembre ne s’affiche pas car pas de texte (ou de lien), vide.

Le mois de Novembre, son onglet est actif car préciser en html via une class et avec le script qui correspond. <li id="Nov" class="nav-link actif">Novembre</li>

Mais ce n’est pas bon c’est le mois de Novembre qui devrais l’être, il faudrait donc le rendre actif en html et ne pas rendre actif le mois d’octobre et ce manuellement ce que je voudrais éviter.

Si j’enlève en html la class actif en toute logique aucun onglet et son contenu ne s’activent tel que dans le fichier démo test 8. Et tel quel c’est ce qu’il faudrait mais que Novembre s’active automatiquement étant le dernier onglets à avoir du contenu.

Les deux fichier en question : https://sumto.be/archives_presse/test_7.html et https://sumto.be/archives_presse/test_8.html

J’ai testé des dizaines de possibilités mais ne m’y connaissant pas du tout, je ne trouve pas…

Merci à vous d’avoir lu, tout aide sera la bienvenue.

Vincent

Modifié le 18 décembre 2022 par VlNCENT

[VlNCENT]

Bonjour à chacun et chacune,

Le problème est résolu grâce à ce script : 

 $(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.

[Dylav]

Bonjour Vincent,
Merci pour ton auto-résolution et ton retour d'info.
J'allais te demander des précisions sur les caractéristiques de la classe « actif »... c'est devenu inutile.