Où placer le javascrpit ...

[elsa2607]

Bonsoir,

J'ai un tout petit problème ^^ j'ai suivi un tutoriel et je coince car l'auteur à été très ambigu quand à l'endroit ou placer le script :

Tutoriel:

HTML:

et là le JAVASCRIPT

Code:

jQuery(function($){
   
    /**
    * Système d'onglet
    */
    $('.tabs').each(function(){
        var current = null;            // Permet de connaitre l'élément courant
        current = $(this).find('a:first').attr('href');
        $(this).find('a[href="'+current+'"]').addClass('active');  // On ajoute la classe active sur le lien qui correspond
        $(current).siblings().hide();  // On masque les éléments
        $(this).find('a').click(function(){
                var link = $(this).attr('href');
                if(link == current){
                    return false;
          }else{
              // On ajoute la class active sur l'onglet courant et on la supprime des autres onglets
              $(this).addClass('active').siblings().removeClass('active');
              $(link).show().siblings().hide();    // On masque/affiche les div suivant les cas
              current = link;                      // On change la valeur de l'onglet courant
          }
        });
    });
   
});

Je ne comprend pas où metre le javascript :$ J'ai jamais rien compris à ça :$ :$
Quelqu'un peut-il me dire ?

Mon code java dans le PA:

urbangraphisme.forumactif.org
Mercii

[Kaktus]

Bonsoir,
Sur forumactif, pas besoin de cette ligne puisque c'est implanté de base:

Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Et pour ce code;

Code:

jQuery(function($){
 
    /**
    * Système d'onglet
    */
    $('.tabs').each(function(){
        var current = null;            // Permet de connaitre l'élément courant
        current = $(this).find('a:first').attr('href');
        $(this).find('a[href="'+current+'"]').addClass('active');  // On ajoute la classe active sur le lien qui correspond
        $(current).siblings().hide();  // On masque les éléments
        $(this).find('a').click(function(){
                var link = $(this).attr('href');
                if(link == current){
                    return false;
          }else{
              // On ajoute la class active sur l'onglet courant et on la supprime des autres onglets
              $(this).addClass('active').siblings().removeClass('active');
              $(link).show().siblings().hide();    // On masque/affiche les div suivant les cas
              current = link;                      // On change la valeur de l'onglet courant
          }
        });
    });
 
});

Allez sur le panneau d'administration, puis l'onglet Modules, enfin Gestion des codes Javascript en bas de la page. Cocher Oui à Activer la gestion des codes Javascript puis  . Cliquez sur   Créer un nouveau javascript. Donnez le titre de votre choix pour vous repérer, cochez sur toutes les pages, collez le code puis   Et voilà, il n'y qu'à mettre le CSS dans la feuille et le HTML à l'endroit où vous souhaitez mettre le code !

Kaktus

[elsa2607]

Merci beaucoup !
Mais y a t'il un moyen que quand on clique sur un des onglets la plage de remonte pas systématiquement au début du contenu ? C'est à dire qu'elle reste au même endroit que lors du clique.

[Kaktus]

De rien !
Ah par contre, il me semble que c'est à cause du code utilisé puisque les onglets sont en fait des liens donc forcément la page remonte... Il faudrait changer le code et le javascript associé, peut être jeter un œil par-ici: https://forum.forumactif.com/t310879-tableaux-a-onglets c'est facilement personnalisable et fonctionnel !

[elsa2607]

J'avais déjà regardé le tuto :p et malheureusement le Javascript n'est pas expliqué donc moi qui ne m'y connait pas, le tuto ne va pas beaucoup m'aider :/

[Kaktus]

Techniquement il n'y a pas besoin d'y toucher, c'est surtout par le CSS que passe la personnalisation.

[elsa2607]

Ce serait pas la position "absolute" du CSS ? là :

Code:

 
body{
  font-family:Arial;
  letter-spacing:1px;
  font-size:14px; /* Taille du Texte */
  color:#6B6B6B; /* Couleur du Texte */
  line-height:15px;
  background:url("http://nsa30.casimages.com/img/2012/07/14/120714092414955910.png"); /* Image de Fond */
}

/*-- Affichage de la Totalite de la Boite --*/
.bloc{
  margin:50px;
  box-shadow:0px 2px 10px #949494; /* Ombre sur le Bloc*/
  border-radius:5px; /* Coins Arrondis sur le Bloc*/
}

/*-- Affichage du Titre en Haut du Menu --*/
.bloc .title{
  position:relative; /* Position Relative pour Positionner Correctement Onglets */
  padding-left:12px;
  height:34px;
  border-radius:5px 5px 0 0; /* Coins Arrondis */
  background-color:#363636; /* Couleur de Fond */
  color:#ECEDF3; /* Couleur du Texte */
  text-shadow:0px -2px #070F2A;
  line-height:35px;
  font-weight:bold; /* Texte en Gras */
}

/*-- Affichage des Titre dans le Contenu des Onglets --*/
.bloc h1{
  color:#000; /* Couleur du Texte */
  font-size:20px;
  margin-bottom:12px;
}

/*-- Affichage de Tous les Contenus --*/
.bloc .content{
  background:#FFFFFF; /* Couleur de Fond */
  border-radius:0 0 5px 5px; /* Coins Arrondis */
  padding:12px;
}

/*-- Affichage du Tableau des Onglets --*/
.bloc .title .tabs{
  position:absolute; /* Position Absolute pour Positionner Correctement */
  bottom:0;
  right:0;
}

/*-- Affichage des Onglets */
.bloc .title .tabs a{
  background:#8C8C8C; /* Couleur de Fond */
  display:inline-block; /* Permet de Régler la Hauteur */
  color:#FFF;
  text-shadow:none;
  text-decoration:none;
  padding:0 10px;
  height:25px;
  vertical-align:bottom;
  font-weight:normal;
  font-size:12px; /* Taille du Texte */
  line-height:25px; /* Permet de Centre la Hauteur d'Ecriture */
  border-radius:5px 5px 0 0; /* Coins Arrondis */
  margin-right:3px;
}
/*-- Affichage des Onglets Actifs */
.bloc .title .tabs a:hover,.bloc .title .tabs a.active{
  background-color:#FFFFFF; /* Couleur de Fond */
  color:#000000; /* Couleur du Texte */
}

[elsa2607]

up

[elsa2607]

up