Javascript 单击链接时隐藏内容

我有4个导航链接（见下文），ID=activator显示内容，boxclose关闭内容

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

请参见我使用的脚本：
（werkwijze是自定义的，我还有与其他名称相同的代码，如-contact）

$（函数（）{
$（“#激活器werkwijze”）。单击（函数（）{
$（'#overlay werkwijze'）.fadeIn（'fast'，function（）{
$（'box werkwijze'）。动画（{'bottom'：'0px'}，800）；
});
});
$（'#boxclose-werkwijze'）。单击（函数（）{
$（'#box werkwijze'）。动画（{'bottom'：'-600px'}，800，function（）{
$（'#overlay werkwijze'）。淡出（'fast'）；
});
});
});
局
沃克维泽
克拉滕
接触

---

这是一个有效的脚本（覆盖是无用的）jsfiddle.net/8y7Sr/126/

您可以在activator链接上使用数据属性，并将其用作选择器：

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

局
沃克维泽
克拉滕
接触
某物
等
$（函数（）{
$（“.activator”）。单击（函数（e）{
var$target=$（e.target）.data（“target”）；
$（“.activatee”）.not（“#“+$target”）.fadeOut（'fast'）；
$target.fadeIn（）//或任何动画
等
})
})

只是一个一般性的注释-为什么要使用fadeIn（），并在fadeIn（）之后在中设置框的动画？在为div设置动画之后，淡出它？

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