使用jQuery

Question

我有几个静态HTML页面，其中包含div内的一组链接。目前，当我编辑这组链接时，我必须在多个页面上进行相同的编辑。

当我进行更改时，是否有更简单的方法来更新每个页面上的div？也许我可以将它移动到一个单独的HTML文件并使用jQuery插入它？

Answer 1

嗯，你真正需要的是什么（如果你想继续使用Javascript，没有PHP）是模板化的（我可以推荐你mustache.js）

然后，您的代码将如下所示：

var data = {
    links: [
    {   url: "http://",
        text: "Lorem"},
    {   url: "http://",
        text: "Ipsum"}
    ]};
var template = "<ul>{{#links}}" +
                            "<li><a href="{{url}}">{{text}}</a></li>" +
                            "{{/links}}</ul>";
var html = Mustache.to_html(template, data);
$('#DIV_CONTAINING_MENU').html(html);

当然，你可以用jQuery（甚至是javascript）做同样的事情：

var data = [
{url: 'http://', text: 'Lorem'},
{url: 'http://', text: 'Ipsum'}
];
$ul = $('<ul></ul>');
for(var i=0,c=data.length;i<c;i++){
    $ul.append('<li><a href="'+data[i].url+'">'+data[i].text+'</a></li>');
}
$ul.appendTo($('#DIV_CONTAINING_MENU'));

Answer 2

你可以用PHP

来做

<div>link</div>

将此div保存为单独的文件。然后在每个页面上包含此文件include('filepath');。因此，当您想要编辑时，您只需在主文件中编辑一次。

Answer 3

假设您的链接位于网站根文件夹中的静态文件中，名为 links.html ：

<div id="links">
   Your links.
</div>

有几种方法可以将此文件包含在另一个页面中;这里有三个最容易的。

使用jQuery

使用jQuery.load非常容易。

<强> JS：

$('.add-links').load('/links.html');

<强> HTML：

<div class="add-links"></div>

使用SSI

首先，在服务器上启用SSI（如果尚未启用）。（例如，这是set up SSI in Apache，IIS6和IIS7的方式。）接下来，在静态文件中添加包含它的位置。

<强> HTML：

<!--#include virtual="/links.html" -->

使用PHP

假设正确安装并启用了PHP，请告诉服务器将您的静态HTML文件解析为PHP，例如。将扩展程序从.html更改为.php。您可以在其中显示需要显示的链接，如下所示：

<?php include('/links.html'); ?>

多页上相同的<div> </div>

3 个答案:

使用jQuery

使用SSI

使用PHP