使用jquery显示/隐藏基于链接href的div

Question

我目前有一部分工作:

$('#marketing_button').click(function() {
        $('#marketing').fadeIn('slow', function() {
        // Animation complete
        });
    });

如果我点击id marketing_button的元素,那么它将显示营销div.

我正在为一组div和按钮设置基本的显示/隐藏.我有5个href和5个div.每个href都有自己的id,但我觉得有一种更容易的方法,比复制这段代码5次.

另外,我需要在点击新的div时隐藏其他div.

结构看起来像:

<a href="marketing" id="marketing_button">MArketing</a>
<a href="processing" id="processing_button">Processing</a>
<a href="compliance" id="compliance_button">Compliance</a>
...
<div id="services">
<div id"marketing"></div>
<div id"processing"></div>
<div id"compliance"></div>
...
</div>

所以这里是具体的问题:如何访问href,这样我就不需要重复代码5次了,

如何关闭可见的div并淡入新的？

Answer 1

为了通常这样做,您需要一种方法来查找要应用此功能的所有锚点.最简单的方法是为它们添加一个公共类.

<a href="marketing" id="marketing_button" class="abutton">MArketing</a>
<a href="processing" id="processing_button" class="abutton">Processing</a>
<a href="compliance" id="compliance_button" class="abutton">Compliance</a>

现在您可以访问相关的锚点,您可以执行以下操作

$('a.abutton').click(function() {
  var id = $(this).attr('href');
  $(id).fadeIn('slow', function () {
    // Animation complete
  });
});