Bascule les DIVs sur une page en utilisant jQuery

Question

J'ai une rangée de liens en haut de ma page qui sont censés agir comme des onglets, quand on clique sur un bouton, je veux que son DIV s'affiche et le reste se cache. Je ne suis vraiment pas sûr de la meilleure façon d'y arriver.

Ce que j'Originaly est venu avec:

$("#overall").click(function(){ 
    if ($("#overall").is(":hidden")) 
    { 
     $("#hourly-div").hide("fast"); 
     $("#daily-div").hide("fast"); 
     $("#monthly-div").hide("fast"); 
     $("#overall-div").show("fast"); 
    } 
}); 

Mais je trouve ce ne fonctionne pas du tout. Dois-je vérifier si le CSS de la DIV est display: hidden;?

Marquer ci-dessous.

<ul class="stats"> 
     <li><a href="#" id="overall">Overall stats</a></li> 
     <li class="sep">|</li> 
     <li><a href="#" id="hourly">Hourly Bandwidth</a></li> 
     <li class="sep">|</li> 
     <li><a href="#" id="daily">Daily Bandwidth</a></li> 
     <li class="sep">|</li> 
     <li><a href="#" id="monthly">Monthly Bandwidth</a></li> 
    </ul> 
    <div id="overall-div"> 
     overall 
    </div> 
    <div id="hourly-div" style="display: none;"> 
     hourly 
    </div> 
    <div id="daily-div" style="display: none;"> 
     daily 
    </div> 
    <div id="monthly-div" style="display: none;"> 
     monthly 
    </div> 

Je voulais que le div overall montrer lorsqu'un utilisateur charge la page, et le reste à cacher jusqu'à ce qu'un utilisateur clique sur un onglet pour eux.

Merci. :)

Answer 1

Quelque chose comme:

$('ul.stats a').click(function(e) { 
    $('#' + this.id + '-div').show().siblings('[id$=-div]').hide(); 
    e.preventDefault(); 
}); 

Answer 2

La meilleure façon d'y arriver est d'utiliser jQuery UI et le plugin tabs. Si vous devez vous-même implémenter une interface à onglets, consultez au moins leur code pour savoir comment s'y prendre. Notez que vous n'avez pas besoin de télécharger le code de l'interface utilisateur entière pour utiliser uniquement les onglets. Vous pouvez rendre le téléchargement plus petit en le limitant aux composants dont vous avez besoin.

<div class="tabs"> 
    <ul class="stats"> 
      <li><a href="#overall-div" id="overall">Overall stats</a></li> 
      <li><a href="#hourly-div" id="hourly">Hourly Bandwidth</a></li> 
      <li><a href="#daily-div" id="daily">Daily Bandwidth</a></li> 
      <li><a href="#monthly-div" id="monthly">Monthly Bandwidth</a></li> 
    </ul> 
    <div id="overall-div"> 
      overall 
    </div> 
    <div id="hourly-div"> 
      hourly 
    </div> 
    <div id="daily-div"> 
      daily 
    </div> 
    <div id="monthly-div"> 
      monthly 
    </div> 
</div> 

<script type="text/javascript"> 
    $(function() { 
     $('.tabs').tabs(); // that's it unless you want to customize 
    }); 
</script> 

Un avantage supplémentaire à cela est que cela fonctionne très bien si l'utilisateur a javascript désactivé.

Answer 3

Voici comment je l'ai fait, ajoutez à un événement click:

if(jQuery){ 
    jQuery('.tab').removeClass('show'); 
    jQuery('#skills').addClass('show'); 
    return false; 
}; 

et css:

div.tab {display:none;} 
div.show {display:block;}