Javascript 在同一空间中淡入/淡出不同块的正确方法

我有一个水平排列在屏幕上的按钮集合，在这些按钮下面是一个空间，我希望不同类型的内容出现。例如，如果我有一个名为“传记”的按钮并单击它，我希望包含传记文本的块淡入。如果我点击“图片”，传记块应该淡出，图片块应该淡入

我目前的解决方案（我知道这是错误的）如下所示。在我的按钮下面有一个表，其中的行对应于我要显示的不同块，如下所示：

+---------------------+
|                     |
|      biography      |
|                     |
+---------------------+
|                     |
|      pictures       |
|         ...         |

我在样式表中将它们全部设置为

display:none

，然后单击按钮时，我淡出所有行，淡入我想要显示的行。它不干净，而且可能不是最好的做事方式

以下是我拥有的jQuery代码：

var blocks = [
     "projects-fade",
     "blog-fade",
     "online-fade",
     "resume-fade"
]

$("#projects").click( function()
{
    // Fade out all blocks
    $.each(blocks, function()
    {
       $("#" + this).fadeOut(100);
    })
    // Fade in the correct block
    $("#projects-fade").fadeIn(300);
});
// the code above is repeated for each button

在代码

#projects

中有一个名为“projects”的按钮，

blocks

是一个数组，其中包含出现在按钮下方空间中的所有文本容器的ID。正如您在代码中看到的，当单击

#projects

时，所有块都会淡出（如果一个块打开并占用空间），然后在相关块中淡出（在本例中为

#projects淡出

）

---

如何以更好的方式实现这一点？

如果您没有将所有按钮/链接都放在容器中，那么请将它们放在

div

中，并为其提供ID

菜单

。然后对“块”执行相同的操作，但将ID

blocks

指定给该容器。完成后，将JQuery代码更改为：

$("#menu a").click(function()
{
    // Assuming the buttons have the same id's as the blocks, minus "-fade"
    var blockID = $(this).attr("id") + "-fade";

    // Fade out the active block
    $("#blocks .active-block").fadeOut(300, function()
    {
        $(this).removeClass("active-block");

        // Fade in the new block
        $("#" + blockID).addClass("active-block");
        $("#" + blockID).fadeIn(600);
    });        
});

---

它与您当前的代码类似，但如果您不想使用AJAX，这几乎是您所能做的一切。

第一步是发布一些代码。请在问题中包含相关的HTML和Javascript/jQuery。如果我对你的问题的理解是正确的，你是在找手风琴。例如，jQueryUI在这里有一个例子：我不确定AJAX是否是我所寻找的。文本块只是一对链接和一些文本（最多5行），因此很容易嵌入到当前页面中。“AJAX还会适用吗？”@MaxMackie-显然误解了你的问题。编辑我的answer@MaxMackie-谢谢你的接受，但请你也投票支持我的回答：）