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

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

这完全取决于你想做什么，让我们知道:)