Click & Afficher seulement s'il y a une classe div existante

Question

Ma vieille question: One Page fadeIn & fadeOut Transition Logic

Le code fonctionne assez bien, mais j'ai un problème. Dans mon système de navigation, il y a des menus avec des sous-menus, alias des menus déroulants. Donc, si un lien de menu est cliqué sans contenu, mais sous-menus, la page de contenu est chargée vide, jusqu'à ce que je clique sur quelque chose qui a réellement une classe de contenu.

Voici un exemple simple jsFiddle: http://jsfiddle.net/QuKhN/1/

je le veux charger le contenu, que s'il est contenu correspondant à l'ID de lien de menu. Donc, si "Nous contacter" est cliqué dans cet exemple, je ne veux pas qu'il essaie de charger un div non existant appelé "contenu de contact".

Est-ce possible? J'ai essayé quelques choses avec la fonction hasClass(), mais j'ai échoué à réussir.

Merci d'avoir pris le temps de lire et de comprendre.

Answer 1

vous pouvez essayer ceci:

$("ul li a ").click(function() { 
    var cls = $(this).attr('id') 
    if ($('div.content.' + cls).length > 0) { 
     $(".content").fadeOut(500); 
     $('.' + cls).delay(500).fadeIn(1000); 
    } 
    return false; 
}) 

DEMO

Answer 2

Vous pouvez sélectionner l'élément que vous êtes sur le point d'afficher et utiliser la propriété length pour vous assurer qu'il existe un tel élément. La longueur sera supérieure à zéro.

Quelque chose comme ceci:

$("ul li a ").click(function(){ 
    var cls = $(this).attr('id'); 
    // Fade out the previous content no matter what 
    $(".content").fadeOut(500); 
    // Check if there is content to display using length 
    if ($('.' + cls).length > 0) { 
     // Will only display content if it exist 
     $('.' + cls).delay(500).fadeIn(1000); 
    } 
    return false; 
})​;​ 

Voici un exemple de travail: http://jsfiddle.net/QuKhN/2/

Note:

Ce que vous compter sur ne pas utiliser ces classes sur d'autres éléments, mais il en va de même pour le reste de votre script, donc je suppose que ce serait bien dans ce cas.

Answer 3

Essayez hasClass:

$("ul li a ").click(function(){ 
    var cls = $(this).attr('id') 
    $(".content").fadeOut(500); 
    if($("div").hasClass(cls)){ 
     $('.' + cls).delay(500).fadeIn(1000); 
    } 
    return false; 
})​ 

Answer 4

$("ul li a").filter(function(){ 
    return $('.'+this.id).length>0; 
}).click(function(){ 
    var cls = $(this).attr('id') 

    $(".content").fadeOut(500); 
    $('.' + cls).delay(500).fadeIn(1000); 
    return false; 
})​ 

DEMO