javascript - 单击链接时隐藏内容

Question

我有 4 个导航链接（见下文），其中 ID= 激活器显示内容，boxclose 关闭内容。

我可以单击所有激活器并打开所有内容，而它只需要打开一个并关闭另一个。

在这里查看我使用的脚本：
（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/

Answer 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.
    })
})