Discussion :

[Vincent668]

Bonjour à toutes et tous,
J’utilise un thème (Arsha) Bootstrap pour faire un site. L’une des pages sera une petite revue de presses. https://sumto.be/archives_presse/test_5.html
Dans celle-ci, 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 toutes les pages seront faites à l’avance. Pour lui faciliter le travail et éviter les erreurs j’aimerais, si cela est possible, que quand il n’y a pas de lien dans la div class= « item », l’onglet n’apparaisse pas. Dans l’exemple en ligne les onglets Décembre et Octobre ne devrais pas apparaitre. Cerise sur le gâteau se serrait parfait si elle ne doit pas non plus préciser quel onglet doit s’activer.
En gros s’il n’y a pas de lien, pas d’onglet visible. Comme ceux-ci ne sont pas visible le premier onglet contenant un lien s’activerait automatiquement.
Actuellement j’utilise ce script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(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();
		});

Avec la bibliothèque jQuery suivante : https://sumto.be/assets/vendor/boots...uery.latest.js
Et le CSS suivant que j’ai tant bien que mal adapté à celui de Bootstrap (5.0) :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
		#onglets { border-bottom:none; 			
		}
		#onglets li{		
			position:relative;
			float: left;
			cursor: pointer;	
			color:#000;
			z-index: 1;
			background-color:#fff;			
 
		}	
			#onglets .actif{
			border: 1px solid #D2D2D2;
			border-bottom: none;
			font-weight: bold;		
			z-index: 10;
 
		}
			#contenu{
			position: relative;		
			clear: both;			
			padding: 10px;
			border-top: 1px solid #D2D2D2;		
			top: -1px;		
			overflow: hidden;
			z-index: 5;	
 
		}
		@media (max-width:576px){ #contenu { border-top: none; 
			}
			#onglets li { margin-left: -5px; }
			#onglets .actif{ border-bottom: 1px solid #D2D2D2;}
			}

J’espère avoir été assez explicite et de vous avoir donné tous les éléments nécessaires, au besoin n’hésitez pas à me crier dessus 😊 et m’indiquer ce qui manque, merci à vous.
Vincent

[mathieu]

pour limiter les risque que l'utilisateur casse quelque chose dans le code html, vous pouvez stocker les liens au format json dans un fichier séparé et donc ça sera le seul fichier à modifier pour ajouter des liens.

et l'évolution suivante serai par exemple d'utiliser du code coté serveur pour gérer cette liste. ainsi vous n'aurez même plus besoin de donner les codes ftp à la personne qui s'occupe de modifier les liens.

[Vincent668]

Merci Mathieu,
En fait cette personne gère son site elle-même, moi je lui apporte le site fini puis elle se débrouille.
Et je ne connais pas grand-chose non plus si ce n’est que le html et css. Et elle n veux pas de PHP, depuis 15 ans elle fait ainsi mais elle me demande un site responsive, le siens ne l’étant pas.
Bien à vous
Vincent

[SpaceFrog]

Pour le responsive tu paux ajouter un lib comme Bootstrap

[Vincent668]

Merci SpaceFrog,
Elle aime beaucoup le thème Arsha de Bootstrap et tout le site est fini mais pas encore mis en ligne.
Je bloque juste sur ce script, et je n’ai aucune connaissance en la matière. Maintenant je ne sais pas si ma demande est complexe ou prend du temps à mettre en œuvre, je comprendrais dans ce cas que l’ont ne sache pas m’aider. Ce que j’aime dans ce menu à onglet et son contenu, c’est la simplicité du html. J’espère lui faire plaisir en le simplifiant davantage avec ce côté pratique dans ma demande.
Belle journée à vous.
Vincent

[Vincent668]

Bonjour à chacune et chacun,

J'ai trouvé ce petit script Jquery qui fonctionne bien avec du texte, si dans la div id1 il y à du texte il affiche bien l'onglet (id2) et si rien il ne l'affiche pas. :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 <script> $(document).ready(function() { 
  if ( $("#1").text()){ 
    $('#2').show();
  } else { 
    $('#2').hide();
  }
});</script>

Mais malgré de nombreux essais je n'arrive pas à à indiquer qu'au lieux de vérifier si il y à du texte, de vérifier si il y à un lien dans la div id1 et de faire pareil que si c'était du texte.
Du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 <script> $(document).ready(function() { 
  if ( $("#1").href()){ 
    $('#2').show();
  } else { 
    $('#2').hide();
  }
});</script>

Je me doute que la syntaxe est mauvaise, j'en ai essayé plusieurs mais je n'y arrive pas !
Si quelqu'un à une proposition, j'en serais ravis :-)
Belle journée
Vincent