[Résolu] Menu et div

Question

Pages :

Moreauandco

27 Oct 2017 à 10:55

Bonjour,

J'ai beau chercher mais je ne trouve pas le terme exacte...

J'ai 3 images (div), et j'aimerais qu'au clic ca affiche le contenu (caché), mais seulement le contenu de l'image cachée.

Par exemple s'il clic sur l'image A, on affiche contenu A, puis s'il clic sur B, on cache contenu A et on affiche contenu B.. etc

Merci d'avance de votre aide

allan00958

27 Oct 2017 à 11:46

Hello

On dirait un système d'onglets, réalisable en JavaScript ou jQuery.

Faîtes une recherche sur Google, genre : comment créer des onglets en JS.

Moreauandco

27 Oct 2017 à 12:42

allan00958 a écrit :
Hello

On dirait un système d'onglets, réalisable en JavaScript ou jQuery.

Faîtes une recherche sur Google, genre : comment créer des onglets en JS.

J'ai fais la recherche mais c'est pas vraiment des onglets Smiley ohwell

Ici quand je met onglet, sa me met des menus déroulants pour la plupart ou simples menus ...

allan00958

27 Oct 2017 à 13:31

Est-ce que c'est ça?

https://jqueryui.com/tabs/

Moreauandco

27 Oct 2017 à 14:03

allan00958 a écrit :
Est-ce que c'est ça?

https://jqueryui.com/tabs/

Oui sauf qu'ici c'est avec <ul> et <li>, je ne peux pas le faire en image et le personnaliser il me semble ?

allan00958

27 Oct 2017 à 14:10

Est-ce que c'est ça ?

https://demo.tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/demo.html

Sauf que l'on retire l'effet slider....

Moreauandco

27 Oct 2017 à 14:14

allan00958 a écrit :
Est-ce que c'est ça ?

https://demo.tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/demo.html

Sauf que l'on retire l'effet slider....

En fait ca ressemble au deux, le résultat final que je souhaite, dans le premier cas, on ne peut pas personnaliser et c'est par rapport à un " <a> " donc ca bloque car moi je veux que sa soit avec un " <div> " seulement... Et dans le deuxième cas oui, sauf que sans le slider etc.

allan00958

27 Oct 2017 à 14:19

Ok ben si vous savez un peu codez en JS, vous pouvez prendre le code source du 2ème exemple et l'adapter à vos besoins. Sinon, on peut commencer ensemble et je vous laisse partager votre code sur jsfiddle ou codepen, parce que j'avoue être un peu perdu. Ca nous fera un point de départ.

Moreauandco

27 Oct 2017 à 14:51

allan00958 a écrit :
Ok ben si vous savez un peu codez en JS, vous pouvez prendre le code source du 2ème exemple et l'adapter à vos besoins. Sinon, on peut commencer ensemble et je vous laisse partager votre code sur jsfiddle ou codepen, parce que j'avoue être un peu perdu. Ca nous fera un point de départ.

J'ai assez dur avec le javascript Smiley ohwell

Je n'ai pas compris la suite de votre message..

allan00958

27 Oct 2017 à 14:54

Êtes-vous bon en JavaScript ?

Moreauandco

27 Oct 2017 à 14:56

allan00958 a écrit :
Êtes-vous bon en JavaScript ?

Non, j'ai très dur avec le Javascript, donc pas bon..

allan00958

27 Oct 2017 à 14:57

OK

Pouvez-vous poster le code que vous avez ?

Moreauandco

27 Oct 2017 à 15:00

Il n'y a pas vraiment de code,

Pour l'instant je ne fais qu'afficher des div avec un fond d'écran pour chaque type qu'on aurait besoin exemple :

<div class="cadre-choice width-b-3 bg-car">Car</div>
<div class="cadre-choice width-b-3 bg-avion">Avion</div>
<div class="cadre-choice width-b-3 bg-autres">Autres</div>
<div class="clear"></div></p>

allan00958

27 Oct 2017 à 15:00

et le CSS

Moreauandco

27 Oct 2017 à 15:25

div.panel .cadre-choice { float: left; background: rgba(250, 250, 250, 0.5); font-size: 16px; margin: 0 10px; padding: 40px; text-align: center; }
div.panel .cadre-choice:hover { background-color: rgba(250, 250, 250, 0.9); }
div.panel .cadre-choice .title { background-color: rgba(0, 0, 0, 0.5); color: white; padding: 10px; }
.width-b-2 { width: calc(50% - 100px); }
.width-b-3 { width: calc(33% - 100px); }

allan00958

27 Oct 2017 à 15:34

Le CSS est incorrect. Il n' y a pas de div class "cadre-choice" dans une div avec la classe panel. C'est ce que siginifie l'espace entre les 2 (div.panel et cadre-choice).

Voila le fiddle: http://jsfiddle.net/fudqerns/3/

Moreauandco

27 Oct 2017 à 15:47

allan00958 a écrit :
Le CSS est incorrect. Il n' y a pas de div class "cadre-choice" dans une div avec la classe panel. C'est ce que siginifie l'espace entre les 2 (div.panel et cadre-choice).

Voila le fiddle: http://jsfiddle.net/fudqerns/3/

http://jsfiddle.net/fudqerns/5/ j'ai ajouter comme il fallait.

allan00958

27 Oct 2017 à 15:50

OK cool!

Donc maintenant, lorsque l'on clique sur car par exemple, que doit-il se passer ?

Moreauandco

27 Oct 2017 à 16:56