javascript - 超链接上的基本 jQuery 单击打印内容

Question

如果可能的话，我希望能得到一点指导。在我的网站上，我有一个显示“最受欢迎”的小区域，下面有 4 个超链接：博客、提示、新闻、视频。我想要它，以便如果用户单击超链接，它会在下面打印适当的内容，理想情况下不加载整个页面，但不是必需的。

我是 jQuery 新手，所以如果有人可以帮助我，那就太好了。

谢谢你。

Answer 1

看看jQuery的AJAX，尤其是load方法：http ://api.jquery.com/load/

简而言之，此方法向 URL 发出请求，并将响应写入您指定的任何元素。在你的情况下，我可能会：

1) 创建一个返回您要显示的 HTML 片段的 URL，例如： <div><p>Popular Blog 1</p><p>Popular Blog 2</p></div>

2）在您页面上的javascript中，添加如下内容：

$("a#myPopularBlogsLink").click(function() {
    $("#loadAndReplaceContentInThisElement").load("http://mywebsite.com/some-url-returning-data/);
});

3）如果您通读 jQuery 文档，您可能能够更好地适应您的情况 - 例如，在 .load() 方法中传递一个参数来选择您要为其加载数据的页面等。

如果没有更多关于您的情况的详细信息，很难说最佳实践是什么 - 您在服务器端使用 URL 有多大的灵活性，您对内容有多少控制权，以及您是否需要搜索引擎来索引内容（他们会不索引通过 AJAX 加载的内容）。

Answer 2

使用 jQuery，你可以尝试这样的事情：

<script type="text/javascript">
    $(document).ready(function() {
        $("#alink").click(function () {
            $("#aframe").attr("src", $(this).attr('href'));
            return false;
        });
    });
</script>

<a id="alink" href="http://www.google.com">Google</a>
<div id="adiv">
    <iframe id="aframe" src="" width="100%" height="300"></iframe>
</div>