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/