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

Idea on content passing. Help needed

本文关键字：帮助 于内容      更新时间：2023-09-26

核心问题

我需要帮助想出一个概念来实现我的目标。我在想出如何使用我选择的方法正确导航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]位置。联系人由用户加载，接下来这将是class="pageNav"的contentNav[1]位置。

真正的问题

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

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

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

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

因此产生的功能将按以下顺序启动：

subNavContent (  );
    subNavClear ( );

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

如果你喜欢看一看：心灵公司。

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

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

您可以使用一个类来代替手动设置display:block和display:none。选择.active部分，然后从中选择页面导航：

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

CSS

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

处理页面状态并检测哪些内容应该可见的一个好方法是html5历史api。它还有一个优点，即url会随着内容的变化而更新（这是我在"心智公司"中缺少的）。查看mozilla页面或在谷歌上搜索一些例子。https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

相关文章：