【问题标题】：Find currently visible div in jquery在jquery中查找当前可见的div
【发布时间】：2011-03-19 23:28:54
【问题描述】：

我有四个 div 全部设置 display:none 并且在 document.ready 上我正在显示第一个 div.. 我有 4 个链接按钮 link1,link2...link4... 我在 link1 click 上显示 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>

看这里的效果http://jsbin.com/umode4/edit

【问题讨论】：

标签： jquery html effects

【解决方案1】：

您可以为此使用:visible 过滤器选择器。

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

更新：

更简单的方法是为每个链接赋予一个rel 属性，其值与div 的id 和一个类的值相同，例如：

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

还有 div：

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

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

然后你只需要获取点击链接的 rel 并显示/隐藏相应的 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;
});

【讨论】：

@sarfraz 看看我的链接我想用淡入淡出效果显示与链接对应的 div...
@sarfraz 即使现在你也没有明白我的意思......就像SO问问题页面title文本框点击和textarea点击右侧div淡入淡出效果......

【解决方案2】：

使用

$(".ContentDivs:visible");

【讨论】：

【解决方案3】：

试试

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

甚至这个

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

【讨论】：

【解决方案4】：

使用较少的代码，您可以这样做...

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

【讨论】：

在您的演示中，当我单击新链接时 2 div 重叠...我只想隐藏可见 div 并淡入下一个 div ..
完全像 SO 问问题页面标题文本框单击和文本区域单击右侧 div 淡入淡出效果...

【解决方案5】：

这应该可行：

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

});

【讨论】：