jQuery多個div使用錨點的show hide函數

Question

http://jsfiddle.net/BXNE9/1/我想通過錨點使用相關鏈接來打開div。當我點擊鏈接相關的div顯示，但是當我點擊其他鏈接前面的div也顯示。

我想通過錨點在相關鏈接上打開div，但是當我點擊另一個鏈接時，以前的div需要關閉。所有鏈接和相關div都一樣。請幫我

Answer 1

你需要隱藏在點擊回調所有div這樣

var tabs = $('ul.menu li a'); 

    tabs.bind('click',function(event){ 
     var $anchor = $(this); 
     var ids = tabs.each(function(){ 
      $($(this).attr('href')).hide(); 
     }); 
     $($anchor.attr('href')).fadeIn('slow'); 
     event.preventDefault(); 
    }); 

這裏http://jsfiddle.net/joycse06/BXNE9/2/

當一個鏈接，用戶點擊我使用的是$.each循環第一隱藏所有div。

Answer 2

，或者你可以做到這一點.. DIV一個CSS類於母公司股利和

<div style="width:1000px; height:450px; margin-top:50px;"> 

<div style="width:350px; height:250px; margin:0 auto;" class="test"> 
<div id="firstDiv" style="background:#03F; width:350px; height:250px; float:left; display:none;">First Div</div> 
<div id="secondDiv" style="background:#06F; width:350px; height:250px; float:left; display:none;">Second Div</div> 
<div id="thirdDiv" style="background:#09F; width:350px; height:250px; float:left; display:none;">Third Div</div> 
<div id="fourthDiv" style="background:#0CF; width:350px; height:250px; float:left; display:none;">Fourth Div</div> 
</div> 

的js代碼..

$(document).ready(function() { 

    var tabs = $('ul.menu li a'); 

    tabs.bind('click',function(event){ 
     var $anchor = $(this); 
     $(".test div").fadeOut('slow'); 
     $($anchor.attr('href')).fadeIn('slow'); 

     event.preventDefault(); 
    }); 


});​ 

Jsfiddle爲..

Answer 3

另一種可能的解決方案是將類或id放到圍繞淡入的元素的div上：

<div style="width:1000px; height:450px; margin-top:50px;"> 

<div class="fadein" style="width:350px; height:250px; margin:0 auto;"> 

    <div id="firstDiv" style="background:#03F; width:350px; height:250px; float:left; display:none;">First Div</div> 
    <div id="secondDiv" style="background:#06F; width:350px; height:250px; float:left; display:none;">Second Div</div> 
    <div id="thirdDiv" style="background:#09F; width:350px; height:250px; float:left; display:none;">Third Div</div> 
    <div id="fourthDiv" style="background:#0CF; width:350px; height:250px; float:left; display:none;">Fourth Div</div> 

</div> 

，然後使用。孩子在新的衰落之前隱藏起來：

$(document).ready(function() { 

    var tabs = $('ul.menu li a'); 

    tabs.bind('click',function(event){ 
     $('.fadein').children().hide(); 
     var $anchor = $(this); 
     $($anchor.attr('href')).fadeIn('slow'); 
     event.preventDefault(); 
    }); 


});​ 

http://jsfiddle.net/BXNE9/4/