Comment construire un simple onglets avec jQuery?

J'ai le code suivant: violon

Qui fonctionne très bien dans des sites que j'ai créer mon auto et sans JS les onglets loi comme le saut liens vers les sections pertinentes. Lorsqu'il est placé dans le sur mesure, CMS, je suis forcé d'utiliser au moment du saut liens ne fonctionnent pas. J'ai essayé d'ajouter plus de liens relatifs aux onglets qui permet de travailler sans JS, mais avec JS les onglets de contenu n'apparaît pas.

Suis-je raté quelque chose?

html:

<ul id="tabs">

      <li><a href="#tab1">test1</a></li>
      <li><a href="#tab2">test2</a></li>
      <li><a href="#tab3">test3</a></li>
      <li><a href="#tab4">test4</a></li>

</ul>
      <div class="container" id="tab1">Some content</div>
      <div class="container" id="tab2">Some content</div>
      <div class="container" id="tab3">Some content</div>
      <div class="container" id="tab4">Some content</div>

jQuery:

$('#tabs li a:not(:first)').addClass('inactive');
$('.container').hide();
$('.container:first').show();
$('#tabs li a').click(function(){
    var t = $(this).attr('href');
    $('#tabs li a').addClass('inactive');        
    $(this).removeClass('inactive');
    $('.container').hide();
    $(t).fadeIn('slow');
    return false;
})

if($(this).hasClass('inactive')){ //this is the start of our condition 
    $('#tabs li a').addClass('inactive');         
    $(this).removeClass('inactive');
    $('.container').hide();
    $(t).fadeIn('slow');    
}

Cet article montre comment créer des onglets: wapgee.com/story/i/201

OriginalL'auteur Ashley Briscoe | 2012-07-25

22

Je devine que votre site web est d'avoir des problèmes avec le href, je présume que lorsque l'utilisateur clique sur un href, site web automatiquement l'éradication de lui-même.

Voici une nouvelle solution de jsFiddle.

J'ai une solution pour vous:

mise à jour jQuery:
```
$('#tabs li a').click(function(){
  var t = $(this).attr('id');

  if($(this).hasClass('inactive')){ //this is the start of our condition 
    $('#tabs li a').addClass('inactive');           
    $(this).removeClass('inactive');

    $('.container').hide();
    $('#'+ t + 'C').fadeIn('slow');
 }
});
```
nouveau balisage html:
```
<ul id="tabs">

      <li><a id="tab1">test1</a></li>
      <li><a id="tab2">test2</a></li>
      <li><a id="tab3">test3</a></li>
      <li><a id="tab4">test4</a></li>

</ul>
<div class="container" id="tab1C">1Some content</div>
<div class="container" id="tab2C">2Some content</div>
<div class="container" id="tab3C">3Some content</div>
<div class="container" id="tab4C">4Some content</div>
```
Je suis sûr que cela fonctionne bien dans d'autres sites, je ne sais pas pourquoi tous les liens de sauts sont re-diriger à la page d'accueil. Pense que je ferais mieux de contacter les développeurs
whats est votre site?
vous droit, autre chose est de le bloquer, je suppose, mais être prudent avec les conditions si, dans votre exemple, vous avez été en utilisant ce mal. inspecter soigneusement ma condition de la position de l'exemple.
Ce n'est pas mon site, je peux vous envoyer un lien en privé si cela aide, mais en tant que commercial, je ne suis pas sûr si je peux le poster ici
Malheureusement, il ne fonctionne pas dans le site. Je vais devoir revenir en arrière pour les développeurs. Merci à tous pour votre aide je vais marquer comme réponse parce que c'est le code de travail et une grande réponse juste ne fonctionne pas dans le système, je suis obligé de travailler avec

OriginalL'auteur Barlas Apaydin

$(document).ready(function() {
$("#content div").hide(); //Initially hide all content
$("#tabs li:first").attr("id","current"); //Activate first tab
$("#content div:first").fadeIn(); //Show first tab content
$('#tabs li a').click(function(e) {
    e.preventDefault();
    if ($(this).attr("id") == "current"){ //detection for current tab
     return       
    }
    else{             
    $("#content div").hide(); //Hide all content
    $("#tabs li").attr("id",""); //Reset id's
    $(this).parent().attr("id","current"); //Activate this
    $( $(this).attr('href')).fadeIn(); //Show content for current tab
    }
});

});

Voir Démo:
http://jsfiddle.net/pradeepk00786/5ezT3/

Son de nice! Mais ne fonctionne pas pour dynamicaly ajouté html.

OriginalL'auteur user2185340

3

Solution JSFiddle:: https://jsfiddle.net/incorelabs/mg6e4ren/

La mise en œuvre des Onglets est vraiment simple, j'ai modifié le code HTML de votre question, un peu. Enlevé les balises d'ancrage coz ils ne sont pas nécessaires.

HTML
```
<ul>
    <li class="tab-switcher" data-tab-index="0">test1</li>
    <li class="tab-switcher" data-tab-index="1">test2</li>
    <li class="tab-switcher" data-tab-index="2">test3</li>
    <li class="tab-switcher" data-tab-index="3">test4</li>
</ul>
<div id="allTabsContainer">
    <div class="tab-container" data-tab-index="0">Some content - 1</div>
    <div class="tab-container" data-tab-index="1" style="display:none;">Some content - 2</div>
    <div class="tab-container" data-tab-index="2" style="display:none;">Some content - 3</div>
    <div class="tab-container" data-tab-index="3" style="display:none;">Some content - 4</div>
</div>
```
HTML De-Mystifié
1. Ajouter l'onglet "commutateur" classe à chaque "li" de l'élément.
2. Donner une "data-onglet index" attribut à chaque "li".
3. Ajouter l'onglet "conteneur" classe à chacun des Onglets de Conteneur. Également de fournir des "données de l'onglet index" attribut à chaque conteneur qui correspond à la "data-onglet index" attribut sur le "li" de l'élément.
4. Afficher uniquement le conteneur que vous souhaitez visibles, masquer les autres à l'aide de "display:none".
5. Fournir un conteneur parent de tout le contenu des onglets de conteneurs. Dans cet exemple, c'est le "allTabsContainer" div.
jQuery
```
$(document).ready(function () {

    var previousActiveTabIndex = 0;

    $(".tab-switcher").on('click', function () {

        var tabClicked = $(this).data("tab-index");

        if(tabClicked != previousActiveTabIndex) {

            $("#allTabsContainer .tab-container").each(function () {

                if($(this).data("tab-index") == tabClicked) {

                    $(".tab-container").hide();
                    $(this).show();
                    previousActiveTabIndex = $(this).data("tab-index");
                    return;

                }
            });
        }
    });
});
```
jQuery De-Mystifié
1. L'écouteur de clics sur l'onglet "commutateur" obtient initialisé sur "document.prêt".
2. La variable "previousActiveTabIndex" garde une trace de la précédente de l'onglet actif, de sorte que si l'on presse sur le même onglet, encore et encore, il peut être ignoré.
3. Nous organisons un CHAQUE boucle sur l'onglet "conteneur". Ceci est fait pour connaître l'onglet qui doit être affiché. Si le "data-onglet index" l'attribut de données sur chaque matchs, nous afficher cet onglet.
4. Nous conservons la valeur de la "data-onglet index" sauvé "previousActiveTabIndex" qui nous aide à garder une trace de l'onglet précédent qui a été cliqué.
Si il y a des doutes ou si quelqu'un a des suggestions, de faire un commentaire sur le post.

C'est une excellente réponse.
Je suis content que cela a aidé. 🙂

OriginalL'auteur incorelabs

    <script>
 $('.tabheading li').click(function () {
        var tabid = $(this).attr("rel");
        $(this).parents('.tabcontainer').find('.active').removeClass('active');
        $('.tabbody').hide();
        $('#' + tabid).show();
        $(this).addClass('active');

        return false;
    });
</script>

Cliquez sur ici

OriginalL'auteur Sanket Patil

Inclure jquery:

https://code.jquery.com/jquery-3.1.1.min.js

HTML:

<br>
<div align="center" >
  <button data-toggle="tab" data-tabs=".gtabs.demo" data-tab=".tab-1" class="btn btn-info" >Tab 1</button>
  <button data-toggle="tab" data-tabs=".gtabs.demo" data-tab=".tab-2" class="btn btn-info" >Tab 2</button>
  <button data-toggle="tab" data-tabs=".gtabs.demo" data-tab=".tab-3" class="btn btn-info" >Tab 3</button>
</div>
<br />
<div class="gtabs demo" >
  <div class="gtab active tab-1">
    <h1>Gtab 1</h1>
  <button data-toggle="tab" data-tabs=".gtabs.demo" data-tab=".tab-2" class="ui button" >Tab 2</button>
  </div>

  <div class="gtab tab-2">
    <h1>Gtab 2</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi minima fugit, est facere molestiae quod pariatur. Consectetur natus, blanditiis laborum possimus doloremque harum adipiscelit. Nisi minima fugit, est facere molestiae quod pariatur. Consectetur natus, blanditiis laborum possimus doloremque harum adipisci debitis similique, nostrum provident ut dolelit. Nisi minima fugit, est facere molestiae quod pariatur. Consectetur natus, blanditiis laborum possimus doloremque harum adipisci debitis similique, nostrum provident ut dolelit. Nisi minima fugit, est facere molestiae quod pariatur. Consectetur natus, blanditiis laborum possimus doloremque harum adipisci debitis similique, nostrum provident ut doli debitis similique, nostrum provident ut dolore.
    </p>
  </div>

  <div class="gtab tab-3">
    <h1>Gtab 3</h1>
  </div>
</div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi consequatur qui nostrum deleniti, quaerat. Voluptate quisquam nulla, sit error, quas mollitia sint veniam at rem corporis dolore, eaque sapiente qui.
</p>

CSS:

.gtabs {
  position: relative;
  .gtab {
    background: #eee;
    position: absolute;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    padding: 10px;
    top: 5px;
    transition: all 0.4s;
    &.active {
      opacity: 1;
      visibility: visible;
      top: 0;
      transition: all 0.4s;
    }
  }
}

JS:

$("[data-toggle='tab']").click(function () {
  var tabs = $(this).attr('data-tabs');
  var tab = $(this).attr("data-tab");
  $(tabs).find(".gtab").removeClass("active");
  $(tabs).find(tab).addClass("active");
});

Article: http://www.wapgee.com/story/i/201
Démonstration: http://codepen.io/iksdatoo/pen/NjOZrm

OriginalL'auteur Ilyas karim

Sensible Onglets avec fonction de lecture automatique. Ces n'avez pas besoin de n'importe quel plugin