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

单击链接时隐藏内容

1 个答案: