11486 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Afficher onglet et cacher un autre onglet

Bonjour et bonne année !

Je vous explique ce que je voudrais faire : J'ai deux onglets, tous deux liés à une div respective. Je voudrais que lorsque je clique sur un onglet (classe "tab"), il affiche sa div associée (classe "item"), puis lorsque je clique sur l'autre onglet, il affiche l'autre div. Mais qu'il y ait toujours l'une des deux divs affichée, c'est à dire que lorsque l'on reclique sur le même onglet, sa div ne disparaisse pas. Ce serait juste un switch entre les deux divs grâce aux deux onglets. Aussi, la couleur de l'onglet actif (classe ".active") devrait être rouge et celui inactif bleu.

Je suis novice en JS

Voici mon code HTML / CSS : https://codepen.io/Titouan79/pen/qBEVBMB

Merci d'avance pour vos réponses Smiley smile
Modifié par Titouan79 (02 Jan 2020 - 16:46)
La méthode la plus condensée que j'ai pu trouver pour les onglets, c'est celle-ci (sans javascript !) :
<div id="tabs" style="width: 200px; height: 120px;">
  <input id="tabs_1" type="radio" name="tabs_0" checked="">
  <input id="tabs_2" type="radio" name="tabs_0">
  <label for="tabs_1">Tab&nbsp;1</label>
  <label for="tabs_2">Tab&nbsp;2</label>
  <div data="tabs_1"><br><br><br><br>Content 1</div>
  <div data="tabs_2"><br><br><br><br>Content 2</div>
</div>


#tabs input, #tabs div{display: none;}
#tabs label{padding: 0 6px; background: inherit; cursor: pointer;}
#tabs_1:checked ~ [for=tabs_1], #tabs_2:checked ~ [for=tabs_2]{background: #D6EAF8; position: relative; top: 2px;}
#tabs_1:checked ~ [data=tabs_1], #tabs_2:checked ~ [data=tabs_2]{background: #D6EAF8; display: block;}
...sinon, il y a ça, qui est simple à comprendre et à modifier

let tab_1 = document.getElementById('tab_1');
let tab_2 = document.getElementById('tab_2');
let item_1 = document.getElementById('item_1');
let item_2 = document.getElementById('item_2');

item_2.style.display = 'none';

tab_1.onclick = () => {
  tab_1.style.backgroundColor = 'red';
  tab_2.style.backgroundColor = 'blue';
  item_1.style.display = 'flex';
  item_2.style.display = 'none';
}
tab_2.onclick = () => {
  tab_1.style.backgroundColor = 'blue';
  tab_2.style.backgroundColor = 'red';
  item_1.style.display = 'none';
  item_2.style.display = 'flex';
}

PS: ça serait sûrement mieux avec des elem.classList.toggle() Smiley rolleyes
Modifié par Gill (02 Jan 2020 - 19:58)
Meilleure solution
Merci beaucoup ! J'ai utilisé la méthode avec JS et ça fonctionne super bien !
Modifié par Titouan79 (02 Jan 2020 - 21:56)
Une dernière chose, je voudrais aussi changer la couleur du texte de l'onglet : Onglet actif en vert et inactif en jaune, par exemple.
Merci Smiley smile
Modifié par Titouan79 (02 Jan 2020 - 21:55)
Titouan79 a écrit :
Je suis novice en JS

Il faut essayer d'apprendre un petit peu, quand même...
Avec mon code précédent, tu peux comprendre comment on met des éléments en variables, comment on y ajoute des événements, et comment on change leurs styles (couleurs, affichage...).
En observant le code, tu as dû voir qu'il y avait des "red" et des "blue"... qu'il suffit de changer en "green" et en "yellow" pour obtenir ce que tu souhaites.

Allez ! Bonne année... d'apprentissage du Javascript ! Smiley lol
Gill a écrit :

Il faut essayer d'apprendre un petit peu, quand même...
Avec mon code précédent, tu peux comprendre comment on met des éléments en variables, comment on y ajoute des événements, et comment on change leurs styles (couleurs, affichage...).
En observant le code, tu as dû voir qu'il y avait des "red" et des "blue"... qu'il suffit de changer en "green" et en "yellow" pour obtenir ce que tu souhaites.

Allez ! Bonne année... d'apprentissage du Javascript ! Smiley lol

J'ai bien vu ! Mais ce que je cherche c'est la fonction pour la couleur de la police, et non du background.
Titouan79 a écrit :

J'ai bien vu ! Mais ce que je cherche c'est la fonction pour la couleur de la police, et non du background.
Là, c'est moins du javascript que du CSS qu'il faut réviser... Smiley cligne 

tab_1.style.color = 'green';
tab_2.style.color = 'yellow';

Modifié par Gill (03 Jan 2020 - 12:10)
Sujet clos
Aller à