내 목표를 달성하기위한 개념이 필요합니다. 제가 선택한 방법으로 DOM을 올바르게 탐색 할 수있는 방법에 대한 아이디어가 떠오르고 있습니다.
목표
당신은 내가 처음 일을하고 무엇을 알고 있어야합니다 :
내가 내 템플릿의 <section> 요소에 HTML 콘텐츠를 호출하는 아약스를 사용합니다. 그런 다음 해당 HTML 컨텐트에서 class="pageNav" 태그가있는 요소를 호출하여 하위 네비게이션을 보유하고이를 기본 템플릿에있는 id="subNav"에 복사합니다.
function subNavContent () {
var navContent = document.getElementsByClassName('pageNav')[0];
document.getElementById('subNav').innerHTML = navContent.innerHTML;
}
지금은 내가 적절한 배열 값을 할당해야한다이 일을 함께 가지고있는 문제는이를 달성하기 위해 :
새로운 내용이 함께되고 onStateChange 이벤트에서 호출 될 때 나는 이렇게// i is the current content pages sub navigation
navContent = document.getElementsByClassName('pageNav')[i]
사용자가 페이지 콘텐츠를 호출 할 때만 class="pageNav"이 DOM에로드되며 이는 navContent[i] 위치를 지정합니다. 그래서 이것은 나의 딜레마입니다.
예 : 홈 페이지가로드되었습니다. contentNav[0] 위치. 연락처는 다음 사용자가로드합니다 class="pageNav"에 대한 contentNav[1] 위치가됩니다.
실제 질문은 있습니까?
내 예제와 같이 DOM에로드 될 때 페이지의 배열 값을 전달할 수있는 방법이 있습니까? 이 다음 페이지에 출마 될 때 복사 navContent[0]에 class="pageNav"의 배열 값을 다시 설정 한 후
나는 어쩌면 DOM에서 class="pageNav" 내용을 삭제 수 있을까요? 내 생각 와
또한 노력 나는이 생각을하지만 성공을 놀겠되고있다.
subNavContent ();
subNavClear ();
나는이 생각했던 :
function subNavClear () {
var wrap = document.getElementById('contentBody');
var nav = document.getElementsByClassName('pageNav')[0];
wrap.removeChild(nav);
}
그래서 결과 기능이 순서대로 초기화 될 것이다 : 그것은과 같이 옮겨진 후 내가 생각하는 것은 DOM에서 해당 콘텐츠를 class="pageNav"을 삭제했다 배열 값이 contentNav[0] 인 것에 대해 걱정하지 않아도됩니다. DOM을 생성하고 복사 한 다음 DOM에서 삭제하기 때문에 다음로드 할 때 contentNav[0]이 할당 될 것이라고 생각합니다.
원하는 경우보세요 : The Mind Company.이 코드는 설명했다 않는 요청 당
Snipplets.
HTML :
<body>
<!-- Header Areas: (Constent visual)-->
<header>
<div id="headTopRow">
<div id="headerElement">
<nav id="subNav" class="aniSubNavOpen drop-shadow lifted">
</nav>
</div>
</div>
</header>
<!-- Content Areas: (Variable visual)-->
<div id="contentBody">
<br>
<section class="aniDown" id="homePage">
<script>checkPage ('homePage', 'home.html', 'main');</script>
</section>
<section class="aniDown" id="aboutPage"></section>
<section class="aniDown" id="lessonsPage"></section>
<section class="aniDown" id="productPage"></section>
<section class="aniDown" id="contactPage"></section>
</div>
<!-- Footer Area: (Constant visual)-->
<footer>
</footer>
</body>
전환 기능 :
function subNavContent () {
var navContent = document.getElementsByClassName('pageNav')[0];
document.getElementById('subNav').innerHTML = navContent.innerHTML;
}
function sectionAssure(classID, url) {
var tmp = '';
var sel = document.getElementsByTagName('section');
for (var i=0; i<sel.length; i++){
if (sel[i].id == classID) {
tmp = 'block';
}
else {
tmp = 'none';
}
sel[i].style.display = tmp;
}
}
function loadContent (classID, url, type) {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById(classID).innerHTML=xmlhttp.responseText;
subNavContent ();
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
return;
}
function checkPage (classID, url) {
sectionAssure (classID, url);
loadContent (classID, url);
}
솔루션!
@Dennis에게 감사드립니다. 다른 방법을 사용했지만 원칙은 동일합니다.
function subNavContent (classID) {
var sec = document.getElementById(classID);
document.getElementById('subNav').innerHTML = sec.getElementsByClassName('pageNav')[0].innerHTML;
}
당신이 어떤 노력 –
@Juan 멘데스에 넣어 볼 수 있지만, 당신이 요구하는지 말해 하드 알아. 미안, 어쩌면 내가 너와 다른 사람들을 위해 분명히 할 수있는 어딘가가 있을까? 이미 너무 오랜 시간이 걸려서 더 오래 사용할 수 없었습니다. –
당신은 pjax를보아야합니다 : http://pjax.heroku.com/ –