Question

目前我在一个html文件中嵌入了多个页面，并且每个页面底部都有一个导航栏导航到另一个页面。

但是，不同页面中的导航栏在不同位置是相同的代码。因此，在导航栏中编辑一个小细节意味着我必须在所有这些位置中更改（相同）代码。此外，如果我以这种方式实现导航按钮的突出显示不正常。

实际上，导航栏的代码是相同的 - 它们都在相同的div标签内。因此，我认为必须有一些方法可以为所有这些导航栏重用一个代码？因此，每次我更改导航栏中的某些细节时，我不必一次又一次地编辑代码？（如果我有10页或更多页面，这将是一场灾难）

Answer 1

您可以使用JavaScript在初始化时为每个页面添加元素（确保此代码包含在每个HTML文档中）：

$(document).on('pageinit', '[data-role="page"]', function () {
    $(this).children('[data-role="content"]').append('<div class="my-nav-bar">...</div>');
});

然后，您将在.append()函数调用中为导航栏添加HTML。这允许您保留代码的单个副本，并将其用于站点中的每个页面。

这样做的另一个好处是代码只需要由用户下载一次而不是每页下载。

如何使用jquery mobile在多个页面中使用相同的导航栏？

1 个答案: