All geek questions in one place

Find currently div in jquery

I have four divs all set display:none and on document.ready I show the first div .. I have 4 link buttons link1, link2 ... link4 ... I show div1 on link1 and so on .. How to find, which div is currently being displayed in 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>

See the effect here http://jsbin.com/umode4/edit

+4
source share
5 answers

with smaller codes, you can do it this way ...

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>

demonstration

+5
source

You can use :visible filter selector for this.

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

Update:

A simpler approach would be to provide each of your links with a rel attribute with the same value as the div and class id, for example:

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

And divs:

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

And then all you need is to get the link with the button pressed and show / hide the corresponding div:

 $('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; });
+3
source

Use

 $(".ContentDivs:visible");
+1
source

to try

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

or even that

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

This should work:

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(); }); });
0
source

Source: https://habr.com/ru/post/1316623/

More articles:


All Articles