我有一个四个div全部设置display:none和document.ready我显示第一个div ..我有4个链接按钮link1，link2 ... link4 ...我在link1上显示div1点击等等..如何找到哪些div在jQuery中当前可见？在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

2010-07-23 Chendur Pandian

与lesserr代码，你可以这样来做...

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

来源

2010-07-23 07:57:05 Reigel

在你的演示当我点击一个新的链接2 divs重叠...我只想隐藏可见的div并淡化下一个div .. – 2010-07-23 08:04:49

酷似所以问问题页面标题的文本框点击文本区域单击右侧的div淡入淡出效果... – 2010-07-23 08:10:29

我做你的代码略加修改... http://jsfiddle.net/ykdSN/尝试... – Reigel 2010-07-23 08:14:36

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

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

更新：

一种更简单的方法将是给每个链接rel属性具有相同的值的div id和一类，例如：

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

而且申报单：

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

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

一ND那么所有你需要的是让点击链接，显示的相对/隐藏相应的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; 
});

来源

2010-07-23 07:49:46 Sarfraz

@sarfraz看我的链接，我想显示对应于TH与淡入效果E链路股利... – 2010-07-23 07:53:21

@Pandiya Chendur：看我的更新答案请。 – Sarfraz 2010-07-23 08:00:52

@sarfraz你的代码似乎没有得到我的结果http://jsbin.com/umode4/2/edit – 2010-07-23 08:02:26

使用

$(".ContentDivs:visible");

来源

2010-07-23 07:50:56 spinon

尝试

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

甚至这个

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

来源

2010-07-23 07:53:54 mohang

这应该工作：

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

});

来源

2010-07-23 08:24:05

在jQuery中查找当前可见的div

回答

jQuery的

HTML

demo

相关问题