Jquery Div Cacher sur clic

Question

J'utilise coda curseur dans ma page. Voir ici:

http://www.ndoherty.com/demos/coda-slider/1.1.1/

Chaque onglet provoque le volet de déplacer le contenu à l'intérieur quand il est cliqué. Je veux quelque chose SINON à se produire sur le clic. Quand un onglet est cliqué, je veux qu'une image apparaisse dans la section topleft de la page dans un div appelé "#topleft". Par souci de simplicité, concentrons-nous sur ce div, mais j'aurai aussi d'autres divs activés sur click.

Je pensais définir le #topleft div à afficher: none dans le CSS, et en ajoutant une simple fonction jquery qui définit la visibilité #topleft à vrai quand un certain div est cliqué. Alors utilisons ceci pour un exemple: J'ai un div #nav avec 5 divs dedans (chacun contenant son propre lien de nav). Quand on clique sur div #nav taba, je veux que div #topleft apparaisse, et quand un autre navlink (disons #nav tabb) est cliqué, je veux qu'il disparaisse. Quelqu'un peut-il m'aider avec ce code jquery assez simple? MERCI BEAUCOUP!

Answer 1

Utiliser show() et hide().

Quelque chose à l'effet de:

$('#someTabLink').click(function() { 
    $('#someImage').show(); 
}); 

$('#someOtherTabLink').click(function() { 
    $('#someImage').hide(); 
}); 

ou en utilisant toggle():

$('#someTabLink').click(function() { 
    $('#someImage').toggle(); 
}); 

Utilisez l'écran propriété css, par opposition à la visibilité, si vous voulez quelque chose à être d'abord caché lorsque votre charges de page, comme le montrent jQuery, masquer et basculer les méthodes de travail en manipulant la propriété display css.

Answer 2

Pouvez-vous utiliser quelque chose comme ça dans jQuery:

$("element").addClass("ClassName") 
    $("element").removeClass("ClassName") 

Pour supprimer la classe qui le cache et ajouter la classe qui reveales il?

Answer 3

Pour ajouter à la suggestion de karim79, vous pouvez faire plusieurs liens onglet cachent la #topleft div comme ceci:

$('#tabb, #tabc, #tabd').click(function() { 
    $('#topleft').hide(); 
});