Find currently visible div in jquery
I have a four divs all set display:none and on document.ready i am showing the first div.. I have 4 link buttons link1,link2...link4... I showing div1 on link1 click and so on.. How to find which div is currently visible in jquery?
<style type="text/css">
.ContentDivs
{
width: 90%;
height: 300px;
border: solid 5px #404040;
display:none;
}
</style>
</head>
<body>
<form id="form1开发者_如何学Python" 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
with lesserr codes, you could 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>
demo
You can use the :visible filter selector for that.
$('.ContentDivs:visible').........
Update:
An easier approach will be to give each of your links a rel attribute with the same value as the id of divs and a class, eg:
<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 rel of clicked link 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;
});
Use
$(".ContentDivs:visible");
try
var displayedDiv = $('div.ContentDivs').filter(':visible');
or even this
var displayedDiv = $('div.ContentDivs').filter(function(){
if($(this).css('display') != 'none')
return true;
else
return false;
});
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();
});
});
加载中,请稍侯......
精彩评论