Question

我有一个header.jsp，我将其包含在所有页面中以显示项目的标题和徽标。它有一个打开面板的链接。 //header.jsp

<div data-role="header">
<a href="#menuPanel" data-icon="bars" data-rel="panel">Menu</a>


 <div data-role="panel" id="menuPanel" data-position-fixed="true" data-display="overlay" >My menu</div>
</div>

现在我正在使用多页html文档。标题将包含在所有div中，其中包含data-role = page。

<div data-role="page" id="page1">
//include header
</div>
<div data-role="page" id="page2">
//include header here
</div>

我的疑问是我的header.jsp有一个id =＆＃34; menuPanel＆＃34;的面板。两个具有相同ID的div将在我的html页面上包含两次。即使单击链接，我们也可能得到不合格的结果。如何解决这个问题，并保存我的项目，使其在DOM中包含两个具有相同id的div。我想将标题保存为单独的文件。除了使用id之外，我的面板是否可以以其他方式打开。请提出一些解决方案

Answer 1

将标题更改为使用class而不是id，并链接到#：

<div data-role="header">
    <a href="#" class="menuButton" data-icon="bars" data-rel="panel">Menu</a>
    <div data-role="panel" class="menuPanel" data-position-fixed="true" data-display="overlay" >My menu</div>
</div>

添加一些JavaScript以打开/关闭相对于当前页面的菜单面板：

$(document).on("click", ".menuButton", function(event)
{
    var pageID = $(this).closest("[data-role=page]").attr("id");
    $("#" + pageID + " .menuPanel").panel("toggle");
});

<强> JSFiddle

如何防止在多页html文档中的页面上添加重复的id？

1 个答案: