点击链接时隐藏内容

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

我可以点击所有激活器并打开所有内容，而只需打开一个并关闭其他（s）。

在这里看到的剧本我用：
（werkwijze是定制，我也有其他名称，如咨询 - 相同的代码）

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

来源

2013-01-19 fourroses

只是一般性的意见 - 为什么ÿ ou fadeIn（），并在fadeIn（）之后动画框？将div动画后，淡出它？ – jdepypere

你可以在激活链接使用数据的属性，并使用它作为一个选择：

<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-19 11:02:47 stef

点击链接时隐藏内容

回答

相关问题