0

我正在制作一个 Web 应用程序，我必须制作一个在多个页面上重复的菜单。但是每次我在任何菜单中进行更改时，我都必须编辑所有页面。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 );

这怎么可能？

4

3 回答 3

3

创建一个远程 .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-02T01:29:30.307 回答
1

您需要创建所有 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);

然后把它放到一个外部文件中。IE

<script type="text/javascript" src="menu.js"></script>
于 2012-12-02T01:27:07.713 回答
0

将您的 javascript 放在一个外部文件中，然后在您的 html 页面中，您可以链接到该文件：

<head>    
<script src="mymenu.js" type="text/javascript"></script>
</head>
于 2012-12-02T01:22:34.333 回答