système onglet dans un post

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu système onglet dans un post

Message par lonely bird. Jeu 18 Déc 2014 - 15:32

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 ? Surprised) 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
avatar

lonely bird.
Nouveau membre

Messages : 21
Inscrit(e) le : 21/08/2013

http://coffeetherapy.1fr1.net/
lonely bird. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: système onglet dans un post

Message par Père Noël Jeu 25 Déc 2014 - 5:29

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 :

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:
Père Noël

Père Noël
Joyeuses Fêtes
Joyeuses Fêtes

Messages : 292
Inscrit(e) le : 24/12/2010

https://forum.forumactif.com
Père Noël a été remercié(e) par l'auteur de ce sujet.

Résolu Re: système onglet dans un post

Message par lonely bird. Jeu 25 Déc 2014 - 12:07

Merci beaucoup Père Noël et à vos petits lutins ! Very Happy
Passez un très bon Noël et de très bonnes fêtes de fin d'année !
avatar

lonely bird.
Nouveau membre

Messages : 21
Inscrit(e) le : 21/08/2013

http://coffeetherapy.1fr1.net/
lonely bird. a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum