프로그래밍 방식으로 CSS3 및 JS를 통해 HTML 용 NavBar 만들기

-2

재사용 가능한 코드의 경우 문자열 정렬을 사용하여 맨 위 가운데 맞춤 수평 navbar와 이드의 위치를 지정하는 JS 함수를 만들고 싶습니다. 이 예제에서는 몇 가지 가정을합니다. 즉, 배열의 각 문자열은 html 파일 이름과 버튼에 대해 원하는 이름을 나타냅니다. 더 나아가 우리는 w3.css 2.82를 사용할 것입니다.프로그래밍 방식으로 CSS3 및 JS를 통해 HTML 용 NavBar 만들기

그래서 먼저 JS 기능 : HTML에서

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

, 우리는

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

을 가지고 있지만이 작동하지 않습니다. 나는 또한 단지에 appendChild를 시도 ... 여기

출처

2016-11-01 SumNeuron

내가 당신의 루프는 사용자가 제공 한 예제 코드에서 닫는 괄호를 누락되었음을 통지를했다 jsfiddle.net

에 볼 수있는 작업 예입니다.

나는 도움이 .innerHTML + = 핸들러

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. 
}

희망에 .appendChild의 이벤트 핸들러를 변경했다.

출처

2016-11-01 22:16:40 jameswassinger

감사합니다. 그래, 내 사본 - 붙여 넣기에 그것을 놓친. 그렇다면 innerHTML이 어떻게 작동하고 appendChild가 아닌가? – SumNeuron

다음은이 주제에 대한 설명입니다. [ "innerHTML + = ..."vs "appendChild (txtNode)"] (http://stackoverflow.com/questions/2305654/innerhtml-vs-appendchildtxtnode), [ 'innerHTML'및 'appendChild'] (http://stackoverflow.com/questions/23338978/the-difference-between-innerhtml-and-appendchild), [appendChild, insertAdjacentHTML 및 innerHTML의 차이점은 무엇입니까?] (http : //stackoverflow.com/questions/16126960/what-is-the-difference-between-appendchild-insertadjacenthtml-and-innerhtml). – jameswassinger

프로그래밍 방식으로 CSS3 및 JS를 통해 HTML 용 NavBar 만들기

답변

관련 문제