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にクラスまたはIDを配置することです。

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

Answer 3

または、これを行うことができます..CSSクラスを親divに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 ..