Question

核心问题

我需要帮助提出一个概念来实现我的目标。我想知道如何使用我选择的方法正确地导航DOM，我遇到了一个问题。

目标

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

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

从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]的{{1}}位置。

真正的问题？

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

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

我的想法进一步努力 我一直在玩这个想法，但没有成功。我想的是在转移之后从DOM中删除navContent[0]的内容：

class="pageNav"

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

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

我认为这样可以让我不用担心subNavContent ( ); subNavClear ( );的数组值。我想是因为我在创建和复制之后将其从DOM中删除，下一个要加载的将被分配contentNav[0]。

如果您愿意，请查看：The Mind Company。

每个请求的Snipplet 这段代码的解释如下。

HTML：

contentNav[0]

过渡功能：

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

解决方案!!

感谢@Dennis给我这个想法。虽然我使用了不同的方法，但原理是相同的。

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

Answer 1

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

Answer 2

您可以使用课程，而不是手动设置display:block和display:none。选择.active部分，然后从那里选择pageNav：

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

CSS

#contentBody > section { display:none; }
#contentBody > section.active { display: block; }

关于内容传递的想法。需要帮助

2 个答案: