Travailler avec des onglets dans jQuery

Shraddha Paghdar 15 février 2024

jQuery jQuery Tabs

Dans l’article d’aujourd’hui, nous allons découvrir les onglets dans jQuery.

Onglets dans jQuery

Les onglets sont une zone de contenu unique avec plusieurs zones, chacune associée à un en-tête dans une liste. Les onglets sont généralement utilisés pour diviser le contenu en plusieurs sections qui peuvent être échangées comme un accordéon pour économiser de l’espace.

Les onglets ont un ensemble sélectionné de balisage qui doit être utilisé pour qu’ils fonctionnent correctement :

Les onglets eux-mêmes doivent être dans une liste ordonnée ou non ordonnée.
Chaque title d’onglet doit être à l’intérieur d’un élément de liste et être accompagné d’une ancre avec un attribut href à envelopper.
Chaque panneau d’onglet peut être n’importe quel élément valide mais doit avoir un ID qui correspond au hachage dans l’ancre de l’onglet associé.

Le contenu de chaque panneau à onglets peut être défini sur la page Web ou chargé via Ajax ; les deux sont automatiquement gérés en fonction du href de l’ancre associée à l’onglet. L’utilisation des onglets par défaut est désactivée en cliquant sur.

Cependant, les événements peuvent être modifiés pour survoler l’option des événements. Comprenons-le avec l’exemple suivant.

Code-HTML :

<ul id="tabs">
  <li><a id="home">Home</a></li>
  <li><a id="about">About</a></li>
</ul>
<div class="container" id="homeC">Home Screen</div>
<div class="container" id="aboutC">About Us</div>

Code-CSS :

#tabs {

   width: 100%;
    height:30px;
   border-bottom: solid 1px #CCC;
   padding-right: 2px;
   margin-top: 30px;


}
a {cursor:pointer;}

#tabs li {
    float:left;
    list-style:none;
    border-top:1px solid #ccc;
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
    margin-right:5px;
    border-top-left-radius:3px;
    border-top-right-radius:3px;
      outline:none;
}

#tabs li a {

    font-family:Arial, Helvetica, sans-serif;
    font-size: small;
    font-weight: bold;
    color: #5685bc;;
   padding-top: 5px;
   padding-left: 7px;
   padding-right: 7px;
    padding-bottom: 8px;
    display:block;
    background: #FFF;
    border-top-left-radius:3px;
    border-top-right-radius:3px;
    text-decoration:none;
    outline:none;

}

#tabs li a.inactive{
    padding-top:5px;
    padding-bottom:8px;
  padding-left: 8px;
  padding-right: 8px;
    color:#666666;
    background: #EEE;
   outline:none;
   border-bottom: solid 1px #CCC;

}

#tabs li a:hover, #tabs li a.inactive:hover {


    color: #5685bc;
      outline:none;
}

.container {

    clear:both;
    width:100%;
    border-left: solid 1px #CCC;
      border-right: solid 1px #CCC;
  border-bottom: solid 1px #CCC;
    text-align:left;
  padding-top: 20px;

}

.container h2 { margin-left: 15px;  margin-right: 15px;  margin-bottom: 10px; color: #5685bc; }

.container p { margin-left: 15px; margin-right: 15px;  margin-top: 10px; margin-bottom: 10px; line-height: 1.3; font-size: small; }

.container ul { margin-left: 25px; font-size: small; line-height: 1.4; list-style-type: disc; }

.container li { padding-bottom: 5px; margin-left: 5px;}

Code-JavaScript :

$(document).ready(function() {
  $('#tabs li a:not(:first)').addClass('inactive');
  $('.container').hide();
  $('.container:first').show();
  $('#tabs li a').click(function() {
    var t = $(this).attr('id');
    if ($(this).hasClass('inactive')) {
      $('#tabs li a').addClass('inactive');
      $(this).removeClass('inactive');
      $('.container').hide();
      $('#' + t + 'C').fadeIn('slow');
    }
  });
});

Dans l’exemple ci-dessus, nous avons défini des onglets avec une balise ul qui listera tous les onglets. Le contenu des onglets sera caché par défaut à l’aide de la méthode hide, et par défaut, le premier onglet sera visible.

Une fois que l’utilisateur clique sur n’importe quel onglet, il appliquera la classe .inactive à tous les éléments de la liste et supprimera la classe .inactive de l’élément de liste sélectionné. Cela garantira que seul l’élément de liste sélectionné sera activé à un moment donné.

Essayez d’exécuter l’extrait ci-dessus dans n’importe quel navigateur prenant en charge jQuery, et il affichera le résultat suivant.

Production:

Travailler avec des onglets dans jQuery

Exécuter le code

Auteur: Shraddha Paghdar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.