如何防止在多頁html文檔的頁面上添加重複的id？

我有一個header.jsp，包含在所有頁面上以顯示我的項目的標題和徽標。它有一個打開面板的鏈接。 //header.jsp如何防止在多頁html文檔的頁面上添加重複的id？

<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 =「menuPanel」的面板。兩個具有相同ID的div將在我的html頁面中包含兩次。即使點擊鏈接，我們也可能會得到不正確的結果。如何解決這個問題，並保存我的項目，使其包含DOM中具有相同ID的兩個div。我想將標題保存爲單獨的文件。除了使用ID之外，我的面板可以以其他方式打開。請提出一些解決方案

來源

2014-07-07 user1502901

利用外部_header_和_panel _;不要重複自己，只添加一次， – Omar

更改標題使用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

來源

2014-07-07 11:23:10 Sga

爲什麼要使事情更復雜？這將導致相同的結果，因爲使用了_Multi-Page Model_，無論您是使用類還是使用id。 – Omar

問題沒有說明如何包含標題;雖然重複是卑鄙的，沒有其他信息我不能建議如何避免它 – Sga

@Sga：謝謝。它是一個java web應用程序。頭文件被指定在一個jsp文件中，該文件將包含在具有數據角色頭文件的div中。這兩個面板將執行相同的工作。那麼使用類而不是id將會解決問題嗎？在頁面2中執行$（「。menuPanel」）不會調用page2中的面板？ – user1502901

如何防止在多頁html文檔的頁面上添加重複的id？

回答

相關問題