如何从其他页面加载文章,例如`articles.php`到另一页,即`index.html`

时间:2016-02-22 03:30:09

标签: html html5

如果我希望将我的主页上的某个部分作为预告片投放到不同页面上的文章,那么以下标记是否正确?

    <section>
      <article>
        <a href="">
          <img src="" alt="">
          <h1></h1>
          <p></p>
        </a>
      </article>
    </section>

1 个答案:

答案 0 :(得分:0)

让我们假设这是您的主页index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HOME PAGE</title>
</head>

<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>

<script type="text/javascript">
$(function() {
    $("#list").addClass('loader');
    $("#list").load('article.php', function() {
        $("#list").removeClass('loader');
    });

});

</script> 
<style>
.loader{
    background-image:url(loader.gif);
    background-repeat:no-repeat;
    background-position:center;
    height:10px;
}
</style>

<!--and this is where you want the articles to appear-->
<div id="list"></div>
</body>
</html>

这是您的文章页面:article.php

<section>
      <article>
        <a href="">
          <img src="" alt="">
          <h1>Heading</h1>
          <p>article</p>
        </a>
      </article>
</section>

如果文章位于特定<div><article>。然后给<div><article>个ID,例如<div id="divID" ><article id="divID" >并使用此javascript加载代码

<script type="text/javascript">
    $(function() {
        $("#list").addClass('loader');
        $("#list").load('article.php #divID', function() {
            $("#list").removeClass('loader');
        });

    });

</script>