2

コンテンツを表示する ID= activator を持つ 4 つのナビゲーション リンク (以下を参照) があり、boxclose はコンテンツを閉じます。

すべてのアクティベーターをクリックしてすべてのコンテンツを開くことができますが、1 つだけを開いて他のコンテンツを閉じる必要があります。

ここで私が使用するスクリプトを参照してください：
（werkwijzeはカスタムです。-contactなどの他の名前の同じコードもあります）

$(function() {
        $('#activator-werkwijze').click(function(){
            $('#overlay-werkwijze').fadeIn('fast',function(){
                $('#box-werkwijze').animate({'bottom':'0px'},800);
            });
        });
        $('#boxclose-werkwijze').click(function(){
            $('#box-werkwijze').animate({'bottom':'-600px'},800,function(){
                $('#overlay-werkwijze').fadeOut('fast');
            });
        });
    });


<a id="activator-bureau" class="activator">bureau</a>
<a id="activator-werkwijze" class="activator">werkwijze</a>
<a id="activator-klanten" class="activator">klanten</a>
<a id="activator-contact" class="activator">contact</a>

これは機能するスクリプトです (オーバーレイは役に立たない) jsfiddle.net/8y7Sr/126/

4

1 に答える 1

1

アクティベーターリンクでデータ属性を使用し、それをセレクターとして使用できます。

<a id="activator-bureau" class="activator" data-target="box-bureau">bureau</a>
<a id="activator-werkwijze" class="activator" data-target="box-werkwijze">werkwijze</a>
<a id="activator-klanten" class="activator" data-target="box-klanten">klanten</a>
<a id="activator-contact" class="activator" data-target="box-contact">contact</a>

<div id="box-contact" class="activatee">Something</div>
Etc.

$(function() {
    $(".activator").click(function(e) {
        var $target = $(e.target).data("target");
        $(".activatee").not("#" + $target).fadeOut('fast');
        $target.fadeIn() // or whatever your animation is
        Etc.
    })
})
于 2013-01-19T11:02:47.813 に答える