如何用DOM和Javascript創建菜單？

我正在製作一個Web應用程序，我必須製作一個在多個頁面上重複的菜單。但每次我在任何菜單中進行更改時，都必須編輯所有頁面。 Javascript可能會創建一個像這樣的菜單（這是一個事件）：如何用DOM和Javascript創建菜單？

var divMenu = document.getElementById("menu"); 
//create element <ul> to add to div menu. 
var ulMenu = document.createElement("ul"); 
ulMenu.value = 
    "<ul id='nav'>" 
    + "<li class='current'><a href='/sytematic_inventory/views/administrador/index.jsp'>Inicio</a></li>" 
    + "<li><a href=''>Inventarios</a></li> " 
    + "</ul>"; 

divMenu.appendChild(ulMenu);

這怎麼可能？

來源

2012-12-02 Cristian Chaparro A.

把它放在'.js'文件中，然後將它包含在每個頁面中？ –

請停止在JS中編寫HTML。 – PeeHaa

雖然您可以使用JavaScript在每個頁面上生成菜單，但使用服務器端語言來執行此操作是一個更好的解決方案。基於JavaScript的方法的一些回退：JavaScript禁用的瀏覽器將無法看到菜單;大多數搜索引擎不會執行JavaScript，並且可能無法捕捉整個網站。 – icktoofay

創建遠程.js文件，並沿着以下線路做一些事情：

(function(){ 

    // All items we'd like to add 
    var navItems = [ 
     {href: 'http://google.com', text: 'Google'}, 
     {href: 'http://bing.com', text: 'Bing'}, 
     {href: 'http://stackoverflow.com', text: 'StackOverflow'} 
    ]; 

    // A few variables for use later 
    var navElem = document.createElement("nav"), 
     navList = document.createElement("ul"), 
     navItem, navLink; 

    navElem.appendChild(navList); 

    // Cycle over each nav item 
    for (var i = 0; i < navItems.length; i++) { 
     // Create a fresh list item, and anchor 
     navItem = document.createElement("li"); 
     navLink = document.createElement("a"); 

     // Set properties on anchor 
     navLink.href = navItems[i].href; 
     navLink.innerHTML = navItems[i].text; 

     // Add anchor to list item, and list item to list 
     navItem.appendChild(navLink); 
     navList.appendChild(navItem); 
    } 

    // Set first list item as current 
    navList.children[0].className = "current"; 

    // Add list to body (or anywhere else) 
    window.onload = function() { 
     document.body.appendChild(navElem); 
    } 

}());

演示：http://jsfiddle.net/sDbff/3/

然後，在任何頁面，您希望包括此，請參考它：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>My Site</title> 
     <script src="navigation.js"></script> 
    </head> 
    <body> 
     <p>Navigation will be appended here.</p> 
    </body> 
</html>

來源

2012-12-02 01:29:30 Sampson

+1乾淨*（無HTML）*解決方案。對於設置文本的'.innerHTML'不是瘋狂的，但那只是我自己。 :-)我只看到缺少的是'li'元素上的類。 ...但是我不確定哪個「李」應該得到它。 –

@ user1689607我可以將一個textNode添加到錨點，但這會阻止作者在錨文本中使用任何html。我錯過了名單上的課程;我會暫時通過更新來拋棄它。 – Sampson

如何在一個菜單（navList）中添加一個子菜單？ –

把你的JavaScript在外部文件中，然後在你的HTML頁面可以鏈接到該文件：

<head>  
<script src="mymenu.js" type="text/javascript"></script> 
</head>

來源

2012-12-02 01:22:34 br3nt

您需要創建所有的DOM項目。

例如

var divMenu = document.getElementById("menu"); 
//create element <ul> to add to div menu. 
var ulMenu = document.createElement('ul'); 
ulMenu.setAttribute('id', 'nav'); 
var liItem = document.createElement('li'); 
liItem.setAttribute('class', 'current'); 

ulMenu.appendChild(liItem); 

var href = document.createElement('a'); 
href.setAttribute('href', '/sytematic_inventory/views/administrador/index.jsp'); 

liItem.appendChild(href); 

href.appendChild(document.createTextNode('Inicio')); 
// Ditto for the other liItem 
document.getElementById('menu').appendChild(ulMenu);

然後把它放到一個外部文件中。即

<script type="text/javascript" src="menu.js"></script>

來源

2012-12-02 01:27:07

如何用DOM和Javascript創建菜單？

回答

相關問題