Aller au contenu
  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

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


VlNCENT
 Partager

Messages recommandés

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é par VlNCENT
Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

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

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

 Partager

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...