javascript - 同一空间不同方 block 淡入/淡出的正确方法

Question

我在屏幕上水平排列了一组按钮，这些按钮下方是一个空间，我希望在其中显示不同类型的内容。例如，如果我有一个名为“传记”的按钮并单击它，我希望包含传记文本的 block 淡入。如果我然后单击“图片”，传记 block 应该淡出并且图片 block 应该淡入。

我目前的解决方案(我知道这是错误的)如下。在我的按钮下方有一个表格，其中的行对应于我要显示的不同 block ，如下所示:

+---------------------+
|                     |
|      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 时，所有 block 都会淡出(如果一个 block 打开并占用空间)然后它会在相关 block 中淡出(在这种情况下#projects-fade).

我怎样才能以更好的方式实现这一目标？

Answer 1

如果您还没有将所有按钮/链接都放在容器中，请将它们放在 div 中并为其指定 ID menu。然后对您的“ block ”执行相同操作，但为该容器指定 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，这几乎就是您可以做的所有事情。