Javascript 通过CSS3和JS以编程方式为HTML制作NavBar_Javascript_Html_Css

Javascript 通过CSS3和JS以编程方式为HTML制作NavBar

javascript html css

Javascript 通过CSS3和JS以编程方式为HTML制作NavBar,javascript,html,css,Javascript,Html,Css,对于可重用代码，我想创建一个JS函数，该函数将字符串数组转换为顶部居中的水平导航栏以及放置位置的id。对于这个例子，我们将做一些假设；也就是说，数组中的每个字符串表示html文件名，以及我们想要的按钮名称。此外，我们将使用w3.css2.82 因此，首先是JS函数： function makeNavigation(navArray, navID) { var numNav = navArray.length; var spaceAllocated = (100 - 2) / numNa

对于可重用代码，我想创建一个JS函数，该函数将字符串数组转换为顶部居中的水平导航栏以及放置位置的id。对于这个例子，我们将做一些假设；也就是说，数组中的每个字符串表示html文件名，以及我们想要的按钮名称。此外，我们将使用w3.css2.82

因此，首先是JS函数：

function makeNavigation(navArray, navID) {
  var numNav = navArray.length;
  var spaceAllocated = (100 - 2) / numNav;
  var theID = document.getElementById(navID);
  for (var i = 0; i < numNav; i++) {
    theID.appendChild('<li style = "width:"'+spaceAllocated+'%><a  href="#'+navArray[i]+'.html">'+navArray[i]+'</a></li>');
  }

函数makeNavigation（navArray，navID）{
var numNav=navArray.length；
var spaceAllocated=（100-2）/numNav；
var theID=document.getElementById（navID）；
对于（变量i=0；i'）；
}

在HTML中，我们有

<head>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>

<div>
<ul id="test" class="w3-navbar w3-border w3-light-grey w3-center">

</ul>
</div>

<script>makeNavigation(["PageOne","PageTwo","PageThree"], "test")</script>




makeNavigation（[“第一页”、“第二页”、“第三页”]、“测试”）

但这不起作用。

我还尝试了appendChild…

这是一个可以查看的工作示例

我确实注意到，在您提供的示例代码中，for循环缺少一个结束括号

我确实将.appendChild事件处理程序更改为.innerHTML+=eventhandler

function makeNavigation(navArray, navID) {
  var numNav = navArray.length;
  var spaceAllocated = (100 - 2) / numNav;     //Spacing 2% for edges
  var theID = document.getElementById(navID);
  for (var i = 0; i < numNav; i++) {
    theID.innerHTML += '<li style = "width:'+spaceAllocated+'"%><a  href="#'+navArray[i]+'.html">'+navArray[i]+'</a></li>';
  } //missing closing bracket inserted here. 
}

函数makeNavigation（navArray，navID）{
var numNav=navArray.length；
var spaceAllocated=（100-2）/numNav；//边的间距为2%
var theID=document.getElementById（navID）；
对于（变量i=0；i；
}//此处插入的结束括号缺失。
}

希望这能有所帮助。

谢谢！是的，我在复制粘贴中错过了它。那么为什么innerHTML可以工作而不是appendChild呢？下面是关于这个主题的一些解释：。