Système d'onglet répétitif
Bonjour à tous,
Je cherche depuis le début de la semaine comment je peux faire mon système d'onglet. J'ai déjà essayé beaucoup de système d'onglet que j'ai pu trouver mais sans succès il me font tous bugué, j'expliquerai pourquoi après.
Je référence en faite tous les équipements d'un jeu sur une page en sachant que chaque équipement à des effets, un craft et une description. Petite illustration :
Item1
- Onglet Effets
- Onglet Crafts
- Onglet Description
Et cela répéter pour chaque item.
Le problème que j'ai avec la plus part des systèmes d'onglets que j'ai pu trouver était que quand je cliquais sur l'onglet "Effets", j'avais tous les items de la page qui se mettais sur l'onglet Effets et pareil si je cliquais sur Description.
J'espère m'être bien expliqué...
Je vous remercie d'avance.
Cordialement,
12 réponses
Chez moi ça fonctionne très bien. Teste avec mon test
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<title>Test</title>
<style>
.item {
border: 2px solid black;
display: inline-block;
padding: 20px;
vertical-align: top;
}
.item > div.item-onglet {
display: none;
}
.item > div.active {
display: block;
}
a.active {
color: red;
}
</style>
</head>
<body >
<div class="item">
<div class="item-title">
Amulette du xxxxx <span class="item-level">Niv.10</span>
</div>
<div class="item-menu rotate">
<a data-tab="item-craft">Crafts</a>
<a class="active" data-tab="item-effet">Effets</a>
<a data-tab="item-description">Description</a>
</div>
<div class="item-image"></div>
<!--
Onglet Statistiques
-->
<div class="item-effet active item-onglet">
<div class="item-effets">
<ul>
<li>Effets 1</li>
<li>Effets 2</li>
<li>Effets 3</li>
<li>Effets 4</li>
<li>Effets 5</li>
</ul>
</div>
<div class="item-conditions">
<ul>
<li>Conditions 1</li>
<li>Conditions 2</li>
<li>Conditions 3</li>
<li>Conditions 4</li>
<li>Conditions 5</li>
</ul>
</div>
</div>
<!--
Onglet Description
-->
<div class="item-description item-onglet">
<p>Ceci est la description</p>
</div>
<!--
Onglet Crafts
-->
<div class="item-craft item-onglet">
<div class="item-craft-element">
<span class="item-craft-nom">30 x laine</span>
<span class="item-craft-categorie"><a href="#">Galet</a></span>
</div>
</div>
<div class="clear"></div>
<div class="item-panoplie margin100">
<div class="item-panoplie-nom"><strong>Panoplie :</strong> Panoplie du xxxx</div>
<div class="item-panoplie-item"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('.item a').on('click', function(){
var that = $(this);
var item = that.parents(".item");
item.find('.active').removeClass('active');
that.addClass('active');
item.find('.'+that.data('tab')).addClass('active');
});
});
</script>
</body>
</html>Les onglets, bootstrap ou autre, gèrent très bien ce genre de chose. Ton problème vient sans doute de tes selecteurs qui ne sont pas uniques.
Je pense aussi que ça viens de là, mais je connais vraiment pas beaucoup le JS, c'est pour ça que je galère ...
Le problème ne viens pas du script qui crée les onglets mais de la manière dont tu index tes items dans les onglets,
Poste nous ton code js/html pour pouvoir d'aider :)
Dans l'id qui gère la liaison tab -> panel, rajoute l'id de l'équipement et ça marchera.
Juste un soucis : si tu as beaucoup d'objets, ca risque vite de devenir énormément lourd pour le navigateur à charger/afficher et l'utilisateur ne va pas être heureux. Il sera alors intéressant de penser à charger les items à la volée (ajax)
On ma parler justement de l'Ajax mais je m'y connais pas du tout ...
J'ai fais ce code : http://codepen.io/anon/pen/zxNrYE
Mais il ne fonctionne pas sur mon site. Normal ? J'ai bien mis jQuery avant.
Salut,
Je ne sais pas si j'ai bien tout compris de ton souhait mais voilà déjà une modif qui fait "marcher" le bout de code que tu as donné.
Mais s'il ne s'agit que de ça, n'importe quel plugin de tabs aurait marché. ET dans ton code, si ça ne marchait pas oui c'est normal, dans le lien tu n'as pas précisé où aller donc pour lui ce n'est un lien :)
Même avec ton code ça ne fonctionne pas. Les href je suis pas obligé de les mette, j'aurai pu changer mes "a" par des "li".
Le problème c'est que sur codepen ça fonctionne mais quand je le met sur mon site ça ne fonctionne pas.
déja explique ce qui ne marche pas car je ne sais pas encore lire dans les boules. Après vérifie que jQuery soit bien chargé. Si ca marche dans Codepen et pas sur ton site , envoie plutot le source de ta page avec les css dans la console de developpers.
Pour les <a oui ca peut marcher sans mais c'est mieux avec :)
Bah les sources et tout c'est exactement la même chose que sur codepen. Je n'ai rien rajotuer justement mise à pars jQuery. Et jQuery est bien lancer.
Tiens essaye de le faire chez toi tu vas voir. Moi chez moi je copie tout de codepen. je lance mais ça fonctionne pas...
Ah ouais ok d'accord ... J'avais tout simplement oublié d'ajouter cette ligne là dans le script.
jQuery(document).ready(function($) {
...
})