我正在制作一个网络应用程序，我必须制作一个在多个页面上重复的菜单。但每次我在任何菜单中进行更改时，我都必须编辑所有页面。 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 );
这怎么可能？
最佳答案
创建一个远程 .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>
关于javascript - 如何使用 DOM 和 Javascript 创建菜单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13665480/