理念上的内容通过。帮助需要 [英] Idea on content passing. Help needed
问题描述
核心问题
我需要帮助想出一个概念来实现我的目标。我有一个问题，想出一个主意，我怎么可以和我所选择的方法正确导航DOM。
的目标
您应该知道我在做什么第一：
我用AJAX调用HTML内容转换为＆lt;节＆gt;我的模板元素。然后，我从这些HTML内容叫类=pageNav标记持有子导航，并将其复制到 ID =建议subnav元位于主模板。我这样做的时候，新的内容是被称为从onStateChange事件这样的：
函数subNavContent（）{
变种navContent = document.getElementsByClassName（'pageNav'）[0];
的document.getElementById（'建议subnav）的innerHTML = navContent.innerHTML。
}
现在的问题我有这样做的，我必须指定适当的数组值来实现这一点：
// i是当前内容页面的子导航
navContent = document.getElementsByClassName（'pageNav'）[我]
更清晰的类=pageNav加载到DOM只有当用户调用的页面内容，这是指定 navContent [I] 的位置。所以这是我的困境。
例：加载主页 contentNav [0] 位置。联系是由用户加载下一页这将是 contentNav [1] 的位置为类=pageNav。
真正的问题？
有没有一些方法，我可以通过页面的数组值，因为它是加载到DOM就像在我的例子或不？
我可以也许从DOM中删除类=pageNav内容之后将其复制到复位类=pageNav的数组值到 navContent [0] 当它跑了下一个页面？
我的想法进一步努力</ STRONG>
我已经被这个想法，但没有成功玩弄。我在想什么是删除类=pageNav从DOM的内容后，它被转移，像这样：
函数subNavClear（）{
变种缠绕=的document.getElementById（'contentBody'）;
变种导航= document.getElementsByClassName（'pageNav'）[0];
wrap.removeChild（NAV）;
}
因此产生的功能将被启动顺序如下：
subNavContent（）;
subNavClear（）;
我认为这将让我不用担心 contentNav的数组值[0] 。我想是因为我从DOM中删除它创建和复制后的下一个加载将被分配 contentNav [0] 。
看一看，如果你喜欢：头脑公司。
Snipplets每个请求 这code不相同。
HTML：
＆LT;身体GT;
＆LT; - 标题区：（类常视觉） - ＆GT;
＆LT;头＆GT;
＆LT; DIV ID =headTopRow＆GT;
＆LT; DIV ID =headerElement＆GT;
＆LT; NAV ID =建议subnav级=aniSubNavOpen下拉阴影解除＆GT;
＆LT; / NAV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /头＆GT;
＆LT; - 内容区：（可变视觉） - ＆GT;
＆LT; DIV ID =contentBody＆GT;
＆LT; BR＆GT;
＆lt;节类=aniDownID =主页＆GT;
＆LT;脚本＆GT; checkPage（主页，home.html的'，'主'）;＆LT; / SCRIPT＆GT;
＆LT; /节＆gt;
＆lt;节类=aniDownID =aboutPage＆GT;＆LT; /节＆gt;
＆lt;节类=aniDownID =lessonsPage＆GT;＆LT; /节＆gt;
＆lt;节类=aniDownID =productPage＆GT;＆LT; /节＆gt;
＆lt;节类=aniDownID =contactPage＆GT;＆LT; /节＆gt;
＆LT; / DIV＆GT;
！＆LT; - 页脚区域：（恒视） - ＆GT;
＆LT;页脚＆GT;
＆LT; /页脚＆GT;
＆LT; /身体GT;
转换功能：
函数subNavContent（）{
变种navContent = document.getElementsByClassName（'pageNav'）[0];
的document.getElementById（'建议subnav）的innerHTML = navContent.innerHTML。
}
功能sectionAssure（的classID，网址）{
VAR TMP ='';
VAR SEL = document.getElementsByTagName（'部分'）;
对于（VAR I = 0; I＆LT; sel.length;我++）{
如果（SEL [我] .ID ==的classID）{
TMP =块;
}
其他 {
TMP =无;
}
SEL [我] .style.display = TMP;
}
}
功能loadContent（的classID，网址，类型）{
VAR XMLHTTP;
如果（window.XMLHtt prequest）{
XMLHTTP =新XMLHtt prequest（）;
xmlhttp.onreadystatechange =功能（）{
如果（xmlhttp.readyState == 4和＆安培; xmlhttp.status == 200）{
的document.getElementById（的classID）.innerHTML = xmlhttp.responseText;
subNavContent（）;
}
};
xmlhttp.open（GET，URL，真正的）;
xmlhttp.send（）;
}
返回;
}
功能checkPage（的classID，网址）{
sectionAssure（的classID，URL）;
loadContent（的classID，URL）;
}
解决方案!!
感谢@Dennis给我这个想法。虽然我使用了不同的方法的原理是一样的。
函数subNavContent（的classID）{
VAR秒=的document.getElementById（的classID）;
的document.getElementById（'建议subnav'）的innerHTML = sec.getElementsByClassName（'pageNav'）[0] .innerHTML。
}
而不是手动设置显示：块和显示：无，你可以使用一个类。选择部分即。主动，并从中选择pageNav：
VAR navContent = document.getElementsByClassName（'积极'）[0] .getElementsByClassName（'pageNav'）[0]
CSS
#contentBody＆GT;部分{显示：无; }
#contentBody＆GT; section.active {显示：块; }
Core Question
I need help coming up with a concept to achieve my goal. I am having a problem coming up with an idea to how I can navigate the DOM properly with the method I have chosen.
The Goal
You should know what I am doing first:
I use ajax to call HTML content into a <section> element of my template. I then call from those HTML contents an class="pageNav" tagged element that holds the sub navigation for it and copies it to a id="subNav" located in the main template. I do this when the new content is being called from the onStateChange event with this:
function subNavContent ( ) {
var navContent = document.getElementsByClassName('pageNav')[0];
document.getElementById('subNav').innerHTML = navContent.innerHTML;
}
Now the issue I have with doing this is I must assign the proper array value to achieve this:
// i is the current content pages sub navigation
navContent = document.getElementsByClassName('pageNav')[i]
To be more clear the class="pageNav" are loaded into the DOM only when the user calls the page content, this is what specifies navContent[i] position. So this is my dilemma.
Example: Home page is loaded contentNav[0] location. Contact is loaded by user next this would be contentNav[1] location for the class="pageNav".
The real questions?
Is there was some way I could pass the array value of the page as it's loading into the DOM like in my example or not?
Could I maybe delete the class="pageNav" contents from the DOM after it copies to reset the array value of class="pageNav" to navContent[0] when it is ran for the next page?
Further efforts with my idea
I have being toying with this idea but with no success. What I was thinking was to delete class="pageNav" for that content from the DOM after it is transfered like so:
function subNavClear ( ) {
var wrap = document.getElementById('contentBody');
var nav = document.getElementsByClassName('pageNav')[0];
wrap.removeChild(nav);
}
so the resulting functions would be initiate in this order:
subNavContent ( );
subNavClear ( );
I thought this would allow me to not worry about the array value of contentNav[0]. I would think because I delete it from the DOM after it is created and copied that the next one to load would be assigned contentNav[0].
Take a look if you like: The Mind Company.
Snipplets per request This code does as explained.
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 functions:
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 );
}
Solution!!
Thanks to @Dennis for giving me this idea. Although I used a different method the principle is the same.
function subNavContent ( classID ) {
var sec = document.getElementById( classID );
document.getElementById('subNav').innerHTML = sec.getElementsByClassName('pageNav')[0].innerHTML;
}
Instead of manually setting display:block and display:none, you could use a class. Select the section that is .active, and select the pageNav from there:
var navContent = document.getElementsByClassName('active')[0].getElementsByClassName('pageNav')[0]
CSS
#contentBody > section { display:none; }
#contentBody > section.active { display: block; }
这篇关于理念上的内容通过。帮助需要的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
