我有一個四個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

相關問題