2

メニューバーのアイテムを選択すると、画面がページの特定の場所に移動する Web サイトを作成しました。次に、「titletext」と「infotext」の 2 箇所でテキストが変化する関数を作成しました。例：

<li><a href="#content" onclick='changeText()'>Weeee!</a></li>

それは機能しますが、問題があることに気づきました。前のページに戻ることを選択すると、ユーザーがページを更新するまで、テキストは同じままです。

Javascript を使用して、(たとえば) ページが#content表示されているときにテキストを変更し、ホームページに表示されているときにテキストを再度変更するように Web サイトに指示するにはどうすればよいですか? コードで別のアプローチを取る必要がありますか?

以下は、changeText() の私のコードです。

function changeText(){
    document.getElementById('titletext').innerHTML = 'Mission Statement';
    document.getElementById('infotext').innerHTML = 'RANDOMTEXT';
}

編集：これは、私のウェブサイトでやりたいことの例です。

ユーザーがブラウザの戻るボタンを押すと、テキストが前のテキストに変わります。したがって、「Hey」と表示された場合は「Bye」と表示され、ユーザーがブラウザの戻るボタンを押すと、コードは「Hey」に変わります

4

2 に答える 2

0

はい、別のアプローチが必要です。ここでの問題は、リンクをクリックしたときにのみ関数が起動し、javascript（またはWebではなく）が回避策なしで状態を維持しないことです。したがって、SammyJsなどのクライアント側ルーティングライブラリを使用して、ブラウザの履歴を処理します。次に、リンクをクリックするのではなく、アドレスを変更するイベントにChangeText関数をバインドします。

したがって、リンクをクリックするとアドレスが変更され（sammyjsを使用するクライアント側）、アドレスが変更されたイベントに応答します。ヒットバックまたは更新すると、アプリケーションの状態は事前に設定されたままになります。

于 2012-10-07T19:08:26.277 に答える
0

変更イベントをリッスンできるこの jQuery プラグインを見てください。#hash基本的に、そのプラグインをインストールしたら、あなたはこのようなものを持つことができます:

window.onhashchange = function() { //when the hash changes (the '#' part)
    var loc = window.location + ""; //get the current location (from the address bar)
    var curHash = loc.substr(loc.lastIndexOf("#")); //get what's after the '#'
    if(curHash == "#home") { //if it's #home
        //change text to whatever you want
    }
    else if(curHash == "#nav") { //else if it's #nav
        //similarly, change text appropriately
    }
    else if(curHash == "#content") {
        //change text, too
    }
};

編集:実際には、最新のブラウザーの現在のバージョンonhashchangeでは既にサポートされています。上記と同じコードを使用しますが、プラグインは気にしないでください。

これを行うには、もっと簡単な方法があるかもしれません。しかし、これが役に立てば幸いです！

于 2012-10-07T19:06:18.087 に答える