Astuce pour ôter le saut de page avec l'utilisation du target

On utilise souvent le target pour les ancres ou pour les onglets.

Cependant, il arrive souvent que lorsqu'on clique sur l'onglet, il s'affiche quelque chose de détestable, désagréable et de parfaitement agaçant : un saut de page plus ou moins important.

Il existe une solution pour lui couper les vivres. :)

Une astuce pour être précise. Je l'ai utilisé => sur cette fiche . C'était pour une commande = ne pas s'en inspirer merci :).

Vous remarquerez que le saut de page n'existe plus lorsqu'on passe de la carte d'identité aux liens.



En premier, débutez avec votre html.

Vous mettez :

Code:

<div id="conteneur_information">

  <a id="votre_onglet01" class="ancre"></a>
  <a id="votre_onglet02" class="ancre"></a>
  <a href="#votre_onglet01" class="votreclassonglet" >Nom Onglet 1</a>
  <a href="#votre_onglet02" class="votreclassonglet">Nom Onglet 2</a>


Vous rajoutez autant de cette partie que vous avez d'onglet en changeant leur numéro :

Code:

  <a id="votre_onglet02" class="ancre"></a>
  <a href="#votre_onglet02" class="votreclassonglet" >Nom Onglet 1</a>

Ensuite, à la suite du code précédent, vous préparez la div qui accueillera les contenus des onglets comme ceci :

Code:

  <div class="votre_class_contenu">

Pour les contenu d'onglets, la manipulation n'est pas dure. Il faut surtout surtout faire attention que l'id ne porte pas le nom de l'id onglet. Si vous le faite, cela ne marchera pas. ^^

Bref, voilà :

Code:

    <div id="votre_onglet1">Contenu onglet 1</div>

    <div id="votre_onglet2">Contenu onglet 2</div>

Une fois que c'est fait, vous ajoutez 2 fermeture de div pour fermer le bloc du contenu des onglets et le bloc qui contient tout :

Code:

  </div>
</div>

Le html est terminé. Cela devrait donner quelque chose comme ceci :

Code:

<div id="conteneur_information">

  <a id="votre_onglet01" class="ancre"></a>
  <a id="votre_onglet02" class="ancre"></a>
  <a href="#votre_onglet01" class="votreclassonglet" >Nom Onglet 1</a>
  <a href="#votre_onglet02" class="votreclassonglet">Nom Onglet 2</a>

  <div class="votre_class_contenu">
    <div id="votre_onglet1">Contenu onglet 1</div>
    <div id="votre_onglet2">Contenu onglet 2</div>
  </div>

</div>

Il reste le css :) :

Code:

/*Fait disparaître les ancres*/
#conteneur_information a.ancre {display: none;}

/*Styliser les onglets*/
.votreclassonglet {
}

/*Bloc qui contient les contenus d'onglets*/
.votre_classe_contenu {
}

/*Contenu onglet 1*/
#votre_onglet1 {
}

/*Contenu onglet 2*/
#votre_onglet2 {
}

/*Cache les contenus d'onglets*/
#votre_onglet1 {display: none;}
#votre_onglet2 {display: none;}

/*Fait apparaître les contenus d'onglet*/
#conteneur_information a#votre_onglet01:target ~ .votre_class_contenu #votre_onglet1{display: block;}
#conteneur_information a#votre_onglet02:target ~  .votre_class_contenu #votre_onglet2{display: block;}

Si vous avez des questions, je serais ravie de vous répondre :)

Peut-être la solution à mon problème! *o*

Merci ^^

Marchi pour cette astuce ! (et très belle fiche au passage ^^)

merci

Merci pour le partage !

Un énorme merci pour cette astuce! J'avais cessé d'espérer pouvoir avoir une telle solution :3
Encore merci ♥

Merci ♥

Salut!

Ce LS a été corrigé, il devrait maintenant fonctionner ^^