système onglet dans un post
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
système onglet dans un post
Détails techniques
Version du forum : phpBB2
Poste occupé : Membre
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
- Voir l'image:
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://jesaispasencoreaha.bbfr.net/
Description du problème
Bonjour à tous !J'ai un petit soucis avec un système d'onglet (d'où mon post ici, aha).
En fait, le code marche parfaitement bien (mais alors où est le problème ? ) mais quand je poste un autre message avec d'autres onglets, le second onglet s'affiche dans le premier (le "underco" s'affiche à la suite du long texte du dernier post).
Après les onglets fonctionnent normalement. Alors je pense que c'est un soucis au niveau du réglage de l'affichage de l'onglet par défaut ?
Y a-t-il un moyen d'arranger cela ?
Je vous transmets mon code html qui est identique au deux posts.
HTML
- Code:
<div class="tabs-onglets"><table><tr><td><a href="#premier_onglet"><div class="mickey"><T2> frightful</T2> story.</div></a></td><td><a href="#deuxieme_onglet"><div class="mickey"><T2>friends</T2> circle.</div></a></td></tr></table></div><div id="contenu"><div class="shikeboum" style="margin-top:-10px;"><div id="premier_onglet"><center><div class="credsl" style="margin-top:7px;background-color:#e0ddd0;">You think that you can hide. I can smell your scent for miles.</div></center>Atque, ut Tullius ait, ut etiam ferae fame monitae plerumque ad eum locum ubi aliquando pastae sunt revertuntur, ita homines instar turbinis degressi montibus impeditis et arduis loca petivere mari confinia, per quae viis latebrosis sese convallibusque occultantes cum appeterent noctes luna etiam tum cornuta ideoque nondum solido splendore fulgente nauticos observabant quos cum in somnum sentirent effusos per ancoralia, quadrupedo gradu repentes seseque suspensis passibus iniectantes in scaphas eisdem sensim nihil opinantibus adsistebant et incendente aviditate saevitiam ne cedentium quidem ulli parcendo obtruncatis omnibus merces opimas velut viles nullis repugnantibus avertebant. haecque non diu sunt perpetrata.</div>
<div id="deuxieme_onglet">Underco</div></div></div>
JAVASCRIPT
- Code:
/**
* Système d'onglets automatisé
* Version : 1.0
* Par Emmanuel "Manumanu" B.
**/
$(document).ready(function() {
var ongletActuel = null;
ongletActuel = $('.tabs-onglets a:first').attr('href');
// Ajout de classe au premier onglet
$('.tabs-onglets').find('a[href="'+ ongletActuel +'"]').addClass('selected');
// Afficher l'élément par défaut correspondant à celui de l'onglet par défaut
$(ongletActuel).show().siblings().hide();
// Gestion de l'événement clic
$('.tabs-onglets a').click(function(e) {
idOnglet = $(this).attr('href');
// Si l'élément est déjà sélectionné, ne rien faire
if (idOnglet == ongletActuel)
e.preventDefault();
else {
// Afficher le contenu demandé et masquer le contenu restant
$(idOnglet).fadeIn().siblings().hide();
// Retirer la classe des autres onglets et l'ajouter sur l'élément sélectionné
$(this).addClass('selected').siblings().removeClass('selected');
ongletActuel = idOnglet;
}
// Empêche le déclenchement du lien
e.preventDefault();
});
});
Je n'ai pas ajouté de css pour les codes du système d'onglet.
Merci à ceux qui pourront m'aider ! Ca sera vraiment très gentil !
Bonne journée et bonnes fêtes de fin d'année !
Dernière édition par lonely bird. le Jeu 25 Déc 2014 - 12:06, édité 1 fois
Re: système onglet dans un post
Hohoho,
Mes lutins me disent qu'il faut le modifier pour que ça prenne permettent plusieurs systèmes d'onglet, ils ont fait ça mais ils ne sont pas très disciplinés :
Il ne faudra pas deux fois des id="#..." ou <a href="#..."> similaires sur la même page.
Joyeusement, :Noel:
Mes lutins me disent qu'il faut le modifier pour que ça prenne permettent plusieurs systèmes d'onglet, ils ont fait ça mais ils ne sont pas très disciplinés :
- Code:
$(function() {
$('.tabs-onglets').each(function(){
var onglets = this;
var ongletActuel = $('a:first', onglets).addClass('selected').attr('href');
// Afficher l'élément par défaut correspondant à celui de l'onglet par défaut
$(ongletActuel).show().siblings().hide();
// Gestion de l'événement clic
$('a', onglets).click(function(e) {
var idOnglet = $(this).attr('href');
// Si autre onglet, afficher le contenu demandé et masquer le contenu restant
if (idOnglet != ongletActuel) {
$(idOnglet).fadeIn().siblings().hide();
// Retirer la classe des autres onglets et l'ajouter sur l'élément sélectionné
$('a', onglets).removeClass('selected');
$(this).addClass('selected');
ongletActuel = idOnglet;
}
// Empêche le déclenchement du lien
e.preventDefault();
});
});
});
Il ne faudra pas deux fois des id="#..." ou <a href="#..."> similaires sur la même page.
Joyeusement, :Noel:
Re: système onglet dans un post
Merci beaucoup Père Noël et à vos petits lutins !
Passez un très bon Noël et de très bonnes fêtes de fin d'année !
Passez un très bon Noël et de très bonnes fêtes de fin d'année !
Sujets similaires
» Systeme de vote, modifier le code pour limité le vote au premier post d'un sujet
» Système de post d'image
» Catégories en onglet : afficher plusieurs catégories/onglet dans le 1er onglet
» Deplacer une réponse à un post dans un autre post
» Icône mise directement lors d'un post d'un sujet dans une catégorie (et pas dans toutes)
» Système de post d'image
» Catégories en onglet : afficher plusieurs catégories/onglet dans le 1er onglet
» Deplacer une réponse à un post dans un autre post
» Icône mise directement lors d'un post d'un sujet dans une catégorie (et pas dans toutes)
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum