在jquery中查找当前可见的div_Jquery_Html_Effects

在jquery中查找当前可见的div

jquery html

在jquery中查找当前可见的div,jquery,html,effects,Jquery,Html,Effects,我有一个四个div全部设置显示：none并且在文档中。准备好了，我正在显示第一个div。。我有4个链接按钮链接1，链接2…链接4。。。我在link1上显示div1单击，依此类推。。如何找到jquery中当前可见的div <style type="text/css"> .ContentDivs { width: 90%; height: 300px; border: solid 5

我有一个四个div全部设置

显示：none

并且在文档中。准备好了，我正在显示第一个div。。我有4个链接按钮链接1，链接2…链接4。。。我在link1上显示div1单击，依此类推。。如何找到jquery中当前可见的div

 <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>


.ContentDivs
{
宽度：90%；
高度：300px；
边框：实心5px#404040；
显示：无；
}
第一组
第二组
第三组
第四组
$（文档）.ready（函数（）{
$（“#div1”）.show（）.fadeIn（“慢”）；
});
$（'#Link1'）。单击（函数（）{
$（“.ContentDivs”）.fadeOut（“fast”）；//在此处查找当前div？
$（“#div1”）.show（）.fadeIn（“慢”）；
});
$（'#Link2'）。单击（函数（）{
$（“.ContentDivs”）.fadeOut（“fast”）；//在此处查找当前div？
$（“#div2”）.show（）.fadeIn（“慢”）；
});
$（'#Link3'）。单击（函数（）{
$（“.ContentDivs”）.fadeOut（“fast”）；//在此处查找当前div？
$（“#div3”）.show（）.fadeIn（“慢”）；
});
$（'#Link4'）。单击（函数（）{
$（“.ContentDivs”）.fadeOut（“fast”）；//在此处查找当前div？
$（“#div4”）.show（）.fadeIn（“慢”）；
});

查看此处的效果

您可以使用过滤器选择器进行此操作

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

更新：

更简单的方法是为每个链接提供一个

rel

属性，该属性的值与div的id和一个类的值相同，例如：

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

使用

$(".ContentDivs:visible");

试一试

甚至这个

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

使用lesserr代码，您可以这样做

jQuery


$（文档）.ready（函数（）{
$（“#div1”）.show（）.fadeIn（“慢”）；
});
$（'.links a'）。单击（函数（）{
$（“.ContentDivs:visible”）.fadeOut（“fast”）；//在此处查找当前div？
$（“#div”+（$（this.index（）+1））.show（）.fadeIn（“慢”）；
});

html


第一组
第二组
第三组
第四组

这应该起作用：

HTML

@sarfraz看我的链接我想显示与链接相对应的div，具有fadein效果…@sarfraz即使现在你还没有明白我的意思。。。与此完全相同，提问页面

title

textbox单击并

textarea

单击右侧div淡入淡出效果…在演示中，当我单击新链接时，2 div重叠。。。我只想在下一个div中隐藏可见div和fadein…，就像这样提问页面标题文本框单击和文本区域单击右侧div淡入淡出效果。。。

$(".ContentDivs:visible");

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

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

<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>

<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>

<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>

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

});