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);

次に、これを外部ファイルに入れます。すなわち

<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 に答える