1

核心问题

我需要帮助提出一个概念来实现我的目标。我无法想出如何使用我选择的方法正确导航 DOM 的想法。

目标

你应该先知道我在做什么：

我使用 ajax 将 HTML 内容调用到<section>模板的元素中。然后我从这些 HTML 内容中调用一个class="pageNav"标记元素，该元素包含它的子导航并将其复制到id="subNav"位于主模板中的一个。当从 onStateChange 事件调用新内容时，我会这样做：

function subNavContent (  ) {  
    var navContent = document.getElementsByClassName('pageNav')[0]; 
    document.getElementById('subNav').innerHTML = navContent.innerHTML;
}

现在我这样做的问题是我必须分配正确的数组值来实现这一点：

// i is the current content pages sub navigation
navContent = document.getElementsByClassName('pageNav')[i]

更清楚地说，class="pageNav"仅当用户调用页面内容时才将其加载到 DOM 中，这就是指定navContent[i]位置的内容。所以这是我的困境。

示例：主页是加载contentNav[0]位置。联系人接下来由用户加载，这将contentNav[1]是class="pageNav".

真正的问题？

是否有某种方法可以在页面加载到 DOM 时传递页面的数组值，就像在我的示例中一样？

我可以class="pageNav"在复制后从 DOM 中删除内容以将数组值重置class="pageNav"为navContent[0]在为下一页运行时吗？

我的想法的进一步努力 我一直在玩弄这个想法，但没有成功。我的想法是在class="pageNav"传输后从 DOM 中删除该内容，如下所示：

function subNavClear ( ) {
    var wrap = document.getElementById('contentBody');
    var nav = document.getElementsByClassName('pageNav')[0];
    wrap.removeChild(nav);
}

因此生成的函数将按以下顺序启动：

subNavContent (  );
    subNavClear ( );

我认为这将使我不必担心contentNav[0]. 我会认为，因为我在创建和复制它之后从 DOM 中删除了它，所以下一个要加载的将被分配contentNav[0]。

如果您喜欢，请看一看：The Mind Company。

每个请求的片段 此代码按说明执行。

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;
}
4

2 回答 2

1

处理页面状态并检测应该可见的内容的一个好方法是 html5 历史 API。它还具有在内容更改时更新 url 的优点（我在“心灵公司”中缺少的东西）。查看 Mozilla 页面或 google 一些示例。https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

于 2012-04-03T22:18:51.473 回答
1

您可以使用一个类，而不是手动设置display:blockand 。display:none选择部分，.active然后从那里选择 pageNav：

var navContent = document.getElementsByClassName('active')[0].getElementsByClassName('pageNav')[0]

CSS

#contentBody > section { display:none; }
#contentBody > section.active { display: block; }
于 2012-04-05T03:09:41.580 回答