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 をコピーした後、DOM からコンテンツを削除して、次のページの実行時にclass="pageNav"toの配列値をリセットすることはできますか?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 を作成してコピーした後に 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

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; }
于 2012-04-05T03:09:41.580 に答える
1

ページの状態を処理し、どのコンテンツを表示する必要があるかを検出する良い方法は、html5 履歴 API です。また、コンテンツの変更時に URL が更新されるという利点もあります (「心の会社」に欠けていたもの)。mozilla ページをチェックするか、いくつかの例をグーグルで検索してください。https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

于 2012-04-03T22:18:51.473 に答える