Javascript - 单击列表元素以加载 HTML 页面动画

Question

这里是Javascript新手。我正在处理此处提供的一段代码 - http://codepen.io/mariusbalaj/pen/beALH/

我正在尝试修改行为，以便在单击时不仅放大列表元素，还应该在动画框架内加载不同的 html 页面。

$(document).ready(function() {
    var $box = $('.box');

    $('.metro li').each(function() {
        var color = $(this).css('backgroundColor');
        var content = $(this).html();
        $(this).click(function() {
            $box.css('backgroundColor', color);
            $box.addClass('open');
            $box.find('p').html(content);
        });

        $('.close').click(function() {
            $box.removeClass('open');
            $box.css('backgroundColor', 'transparent');
        });
    });
});

谁能指出我正确的方向？

更新 1： 我发现修改下一行的“内容”变量会改变动画帧的内容：

       ` $box.find('p').html(content);`

如果我将其更改为：

       ` $box.find('p').html('<h1>Test Page</h1>');`

它按预期工作。但是，我希望每个列表元素的内容都不同。 有没有一种简单的方法可以为每个元素执行此操作？我对“this”关键字感到很困惑。

Answer 1

如果您想打开另一个 HTML 页面，您可能正在寻找这个答案：

how to change page from within javascript

如果您尝试在动画框架内打开它，您应该考虑对新页面/图块的内容提出一些请求并用内容填充它，这里回答：How to get the response of XMLHttpRequest?

这一切都取决于你想做什么，让我们知道:)