Question

我有一些共享相同导航栏的html页面。因此我编写了一个html文件 - topnav.html，我使用以下jQuery代码将其加载到每个页面中。

的javascript

<script type="text/javascript">
$(function() {        
    $('#topnav').load('topnav.html');
});
</script>

HTML

<body>
<div id="topnav"></div>
...

现在，我发现每个页面都需要具有不同的属性（比如不同的标题）。如何将title参数传递给tapnav.html页面？

Answer 1

第一个解决方案是PHP，因为我更喜欢它。如果您想在JS中执行此操作，请参阅下面的编辑。

如果您使用的是PHP，则可以包含一个文件（带有函数），并将该函数作为参数传递，如下所示：

<强>的index.php

<?php
    include "topnav.php";
    top("title");
?>

<强> topnav.php

<?php
    function top($title) {
?>
    <div id="topNav">
        <!-- Other code you need here -->
        <span id="title"><?= $title ?></span> <!-- put in inputted title -->
    </div>
<?php
    }
?>

我没有使用JS / jQuery为我的网站加载资源（部分页面）。 PHP include()更方便，我一直都在使用它！

修改

现在我想起来了，你可能会在JavaScript中做一个非常类似的事情，虽然它稍微麻烦一些。在JS中放一个函数，然后从页面调用它。

例如：

<强>的index.html

<script type="text/javascript"> $(function() { $('#topnav').load('topnav.html'); $("body").append(top("title")); }); </script>

<强> topnav.html

<script> // basically return (or print out) string of resource function top(title) { return "<div id='topNav'>" + "" + "<span id='title'>" + title + "</span>" + "</div>"; } </script>

编辑 2：更详细的解释（按要求）

JS示例的作用是加载资源文件，就像在示例中一样。但是，它不是像你这样的普通HTML文件，而是一个JS文件。一旦你加载它，你现在可以使用JS脚本。基本上，添加的脚本允许您使用大部分预定义的字符串，但您可以添加一些变量（例如，"<span id='title'>" + title + "</span>"允许您将title放入其中。）

使用jQuery将参数传递给我加载的div

1 个答案: