使用 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
  });
});

Answer 2

许多可能的解决方案。在不知道所有细节的情况下，我会在一个类中放置一个包装 div。单击链接时，它会切换其兄弟 div。