jquery - jQuery 多个 div 使用锚点显示隐藏功能

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 和

<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>

​</p>

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>

然后在淡入新的之前使用 .children 隐藏它们：

$(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/