Question

var navigation  = new Array();  // This is for the navigation.
 // ==================== Navigation ==================== //
navigation[0] = '<div id="menu">';
navigation[1] = '<ul>';
navigation[2] = '<li><a href="../about_us.htm">aboutus</a></li>';
navigation[3] = '</ul>';
navigation[4] = '</div><!-- Close TAB NAVIGATION -->';

function show(i)
{
   for (x in i)
   {
       document.write(i[x] + '\n')
   }
}

我已经在JavaScript中为菜单栏创建了上述函数，现在我需要在我的html文件中调用此菜单栏。

Answer 1

我建议您使用document.createElement而不是使用文档写入和字符串数组。

其次我建议使用[]字面值而不是Array构造来初始化数组。
所以像这样：

var arr = [1,2,3]; //like this
var arr2 = new Array(1,2,3,4); // not recommended

以下代码适用于您想要做的事情。

var navigation = document.createElement('div');
navigation.id = 'menu';
navigation.innerHTML = '<ul><li>' +
  '<li><a href="../about_us.htm">aboutus</a></li>' + '</ul></li>';
document.body.appendChild(navigation);

有几种方法可以从你的html中调用它：

将其包含在页面底部的<script></script>标记中
将其置于一个函数中，将其设置为调用onload
在html中添加其他一些触发器。

我个人建议将它放在一个函数中并将其添加到onLoad事件中。

使用Javascript：

window.onload = appendNavigation;
function appendNavigation() {
  var navigation = document.createElement('div');
  navigation.id = 'menu';
  navigation.innerHTML = '<ul><li>' +
   '<li><a href="../about_us.htm">aboutus</a></li>' + '</ul></li>';
  document.body.appendChild(navigation);
}

HTML：

<!doctype html>
<html>
 <head>...</head>
 <body>
   <script src="/script.js"></script>
 </body>
</html>

如果你想要一个有效的例子，请看看这个jsfiddle：https://jsfiddle.net/d1r43w33/

虽然你应该知道，当在jsfiddle之外使用时，你必须在html中包含一个脚本链接。

Answer 2

jonas的变体看起来不错，但我会这样做：

＆＃13;

//Autorun
    $(document).ready(function () {
        appendNavigation();
    });
    
//Function
function appendNavigation() {
  var navigation = document.createElement('div');
  navigation.id = 'menu';
  navigation.innerHTML = '<ul><li>'
                              +
                         '<a href="#">About Us</a>'//Replace # with the your url
                              +
                         '</li></ul>';
  document.body.appendChild(navigation);
}

＆＃13;

<!doctype html>
<html>
<head>...</head>
<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="/script.js"></script>
</body>
</html>

＆＃13;

运行/显示

的另一个启动功能

如何在每个html页面中重复左边的菜单栏

2 个答案: