的jQuery

Question

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

在此处查看效果http://jsbin.com/umode4/edit

Answer 1

代码较少，你可以这样做......

的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

Answer 2

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

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

<强>更新

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

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

和divs：

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

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

然后您需要的是获取点击链接的相关内容并显示/隐藏相应的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;
});

Answer 3

使用

$(".ContentDivs:visible");

Answer 4

试

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

甚至是

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

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

});

在jquery中查找当前可见的div

5 个答案:

的jQuery

的HTML

demo