KernfrageIdee zum Inhalt übergeben. Hilfe
brauchte ich brauche Hilfe mit einem Konzept kommen bis zu meinem Ziel zu erreichen. Ich habe ein Problem mit der Idee, wie ich mit der von mir gewählten Methode richtig im DOM navigieren kann.
Das Tor
sollten Sie wissen, was ich zuerst tue:
ich Ajax verwenden HTML-Inhalte in ein <section> Element meiner Vorlage zu nennen. Ich rufe dann von diesen HTML-Inhalten ein class="pageNav" getaggtes Element auf, das die Unternavigation für es enthält, und kopiert es in eine id="subNav", die sich in der Hauptvorlage befindet. Ich tue dies, wenn die neuen Inhalte aus dem OnStateChange Ereignisse mit diesem aufgerufen wird:
function subNavContent () {
var navContent = document.getElementsByClassName('pageNav')[0];
document.getElementById('subNav').innerHTML = navContent.innerHTML;
}
Nun ist die Frage, die ich mit diesem zu tun habe, bin muß ich den richtigen Array-Wert zuweisen, dies zu erreichen:
// i is the current content pages sub navigation
navContent = document.getElementsByClassName('pageNav')[i]
Um klarer zu werden, werden die class="pageNav" nur dann in das DOM geladen, wenn der Benutzer den Seiteninhalt aufruft, was navContent[i] Position angibt. Das ist also mein Dilemma.
Beispiel: Die Startseite wurde geladen. contentNav[0] Standort. Der Kontakt wird vom Benutzer geladen. Als nächstes wäre dies contentNav[1] Standort für die class="pageNav".
Die echten Fragen?
Gibt es einen Weg, wie ich den Array-Wert der Seite übergeben könnte, wie es in das DOM geladen wird, wie in meinem Beispiel oder nicht?
Könnte ich löschen vielleicht die class="pageNav" Inhalte aus dem DOM, nachdem es kopiert den Arraywert von class="pageNav" zu navContent[0] zurückzusetzen, wenn es für die nächste Seite lief wird?
Weitere Anstrengungen mit meiner Idee Ich habe sein mit dieser Idee liebäugelt, aber ohne Erfolg. Was ich war dachte class="pageNav" für diesen Inhalt aus dem DOM zu löschen, nachdem es wie so übertragen wird:
subNavContent ();
subNavClear ();
Ich dachte, das würde:
function subNavClear () {
var wrap = document.getElementById('contentBody');
var nav = document.getElementsByClassName('pageNav')[0];
wrap.removeChild(nav);
}
so die resultierenden Funktionen in dieser Reihenfolge einleiten würde Erlauben Sie mir, mich nicht um den Array-Wert von contentNav[0] zu kümmern. Ich würde denken, weil ich es aus dem DOM lösche, nachdem es erstellt und kopiert wurde, dass der nächste geladen werden würde contentNav[0] zugewiesen werden.
Werfen Sie einen Blick, wenn Sie mögen: The Mind Company.
Snipplets pro Anfrage Dieser Code wird wie erläutert.
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>
Transition Funktionen:
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);
}
Lösung !!
Danke an @Dennis für diese Idee. Obwohl ich eine andere Methode verwendet habe, ist das Prinzip das gleiche.
function subNavContent (classID) {
var sec = document.getElementById(classID);
document.getElementById('subNav').innerHTML = sec.getElementsByClassName('pageNav')[0].innerHTML;
}
Schwer zu sagen, was Sie fragen, wenn ich sehe, können Sie in einigen Aufwand setzen –
@Juan Mendes Ich kenne. Sorry, vielleicht kann ich irgendwo für dich und andere klären? Es war schon so lange eine Frage und ich wollte es nicht länger machen. –
sollten Sie auf pjax schauen: http://pjax.heroku.com/ –