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。

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

2 个答案: