目前我在一个 html 文件中嵌入了多个页面，每个页面底部都有一个导航栏，用于导航到另一个页面。
但是，不同页面中的导航栏在不同位置是相同的代码。因此，在导航栏中编辑一个小细节意味着我必须在所有这些位置更改（相同的）代码。此外，如果我以这种方式实现，导航栏按钮的突出显示将无法正常工作。
实际上，导航栏的代码是相同的——它们都在相同的 div 标签内。因此，我认为必须有某种方法可以为所有这些导航栏重用一个代码？这样我就不必每次更改导航栏中的某些细节时一次又一次地编辑代码？ （如果我有 10 页或更多，那将是一场灾难）
【问题讨论】：
标签： jquery jquery-mobile
您可以使用 JavaScript 在每个页面初始化时为其添加一个元素（确保此代码包含在每个 HTML 文档中）：
$(document).on('pageinit', '[data-role="page"]', function () {
$(this).children('[data-role="content"]').append('<div class="my-nav-bar">...</div>');
});
然后，您将在 .append() 函数调用中为您的导航栏添加 HTML。这使您可以保留一份代码副本，并在网站的每个页面上使用它。
这有一个额外的好处，即用户只需下载一次代码，而不是每个页面。
【讨论】：
pageshow 事件处理程序，根据当前to 页面突出显示正确的页面。如果你遇到问题，你知道去哪里问。