Je ai un quatre divs tous ensemble display:none et sur document.ready je montre le premier div .. J'ai 4 boutons de lien link1, link2 ... link4 ... I montrant div1 sur link1 cliquez et ainsi de suite .. Comment trouver quelle div est actuellement visible dans jquery?Trouver div visible actuellement dans jquery

<style type="text/css"> 
     .ContentDivs 
     { 
      width: 90%; 
      height: 300px; 
      border: solid 5px #404040; 
      display:none; 
     } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <div> 
      <a id="Link1" href="#">Link1</a> 
      <a id="Link2" href="#">Link2</a> 
      <a id="Link3" href="#">Link3</a> 
      <a id="Link4" href="#">Link4</a> 
     </div> 
     <div id="div1" class="ContentDivs"> 
     DIv1 
     </div> 
     <div id="div2" class="ContentDivs"> 
     Div2 
     </div> 
     <div id="div3" class="ContentDivs"> 
     Div3 
     </div> 
     <div id="div4" class="ContentDivs"> 
     Div4 
     </div> 
    </div> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
       $("#div1").show().fadeIn("slow"); 
     }); 
     $('#Link1').click(function() { 
     $(".ContentDivs").fadeOut("fast");//find current div here? 
      $("#div1").show().fadeIn("slow"); 
     }); 
     $('#Link2').click(function() { 
     $(".ContentDivs").fadeOut("fast");//find current div here? 
      $("#div2").show().fadeIn("slow"); 
     }); 
     $('#Link3').click(function() { 
     $(".ContentDivs").fadeOut("fast");//find current div here? 
      $("#div3").show().fadeIn("slow"); 
     }); 
     $('#Link4').click(function() { 
     $(".ContentDivs").fadeOut("fast");//find current div here? 
      $("#div4").show().fadeIn("slow"); 
     }); 
    </script>

Voir l'effet ici http://jsbin.com/umode4/edit

2010-07-23 Chendur Pandian

avec des codes lesserr, vous pourriez le faire de cette façon ...

jQuery

<script type="text/javascript"> 
    $(document).ready(function() { 
      $("#div1").show().fadeIn("slow"); 
    }); 
    $('.links a').click(function() { 
     $(".ContentDivs:visible").fadeOut("fast");//find current div here? 
     $("#div" + ($(this).index()+1)).show().fadeIn("slow"); 
    }); 
</script>

html

<div> 
    <div class="links"> 
     <a id="Link1" href="#">Link1</a> 
     <a id="Link2" href="#">Link2</a> 
     <a id="Link3" href="#">Link3</a> 
     <a id="Link4" href="#">Link4</a> 
    </div> 
    <div id="div1" class="ContentDivs"> 
     DIv1 
    </div> 
    <div id="div2" class="ContentDivs"> 
     Div2 
    </div> 
    <div id="div3" class="ContentDivs"> 
     Div3 
    </div> 
    <div id="div4" class="ContentDivs"> 
     Div4 
    </div> 
</div>

demo

Source

2010-07-23 07:57:05 Reigel

Dans votre démo lorsque je clique sur un nouveau lien2 les divs se chevauchent ... Je veux juste cacher la div visible et fadein la div prochaine .. –

Exactement comme SO poser une question titre de la page textbox cliquer et textarea cliquer à droite div div fondent effet ... –

J'ai fait une légère révision de vos codes ... http://jsfiddle.net/ykdSN/ essayez-le ... – Reigel

Vous pouvez utiliser le sélecteur de filtre :visible pour cela.

$('.ContentDivs:visible').........

Mise à jour:

Une approche sera plus facile de donner à chacun de vos liens un attribut rel avec la même valeur que l'ID de divs et une classe, par exemple:

<a rel="Link1" class="link" href="#">Link1</a> 
<a rel="Link2" class="link" href="#">Link1</a>

Et divs:

<div id="Link1"> 
    Div1 
</div> 

<div id="Link2"> 
    Div2 
</div>

A e tout ce que vous avez besoin est d'obtenir le rel de lien cliqué et afficher/cacher la div correspondant:

$('a.link').click(function(){ 
    var rel = $(this).attr('rel'); 

    if ($('div#' + rel).is(':visible')) 
    { 
    $('div#' + rel).fadeOut('fast'); 
    } 
    else 
    { 
    $('div#' + rel).fadeIn('fast'); 
    } 

    return false; 
});

Source

2010-07-23 07:49:46 Sarfraz

@sarfraz regarder mon lien je veux afficher la div correspondant th lien e avec un effet FADEIN ... –

@Pandiya Chendur: Voir ma réponse à jour s'il vous plaît. – Sarfraz

@sarfraz votre code ne semble pas obtenir mon résultat http://jsbin.com/umode4/2/edit –

Utilisez

$(".ContentDivs:visible");

Source

2010-07-23 07:50:56 spinon

essayer

var displayedDiv = $('div.ContentDivs').filter(':visible');

ou même ce

var displayedDiv = $('div.ContentDivs').filter(function(){ 
     if($(this).css('display') != 'none') 
      return true; 
     else 
      return false; 
     });

Source

2010-07-23 07:53:54 mohang

Cela devrait fonctionner:

HTML

<div> 
    <div id="links"> 
     <a id="Link1" href="#" rel="div1">Link1</a> 
     <a id="Link2" href="#" rel="div2">Link2</a> 
     <a id="Link3" href="#" rel="div3">Link3</a> 
     <a id="Link4" href="#" rel="div4">Link4</a> 
    </div> 

    <div id="div1" class="ContentDivs"> 
    DIv1 
    </div> 
    <div id="div2" class="ContentDivs"> 
    Div2 
    </div> 
    <div id="div3" class="ContentDivs"> 
    Div3 
    </div> 
    <div id="div4" class="ContentDivs"> 
    Div4 
    </div> 
</div>

Javascript

$(function() { 
    $("#links a").click(function() { 
     $(".ContentDivs").css("display", "none"); 
     $("#"+this.rel+".ContentDivs").fadeIn(); 
    }); 

});

Source

2010-07-23 08:24:05

Trouver div visible actuellement dans jquery

Répondre

jQuery

html

demo

Questions connexes