2

ユーザーがリンクをクリックし、Jquery の load() を使用して、サーバーへの非同期要求を介して、Jquery が id="article" を含む div を設定する基本的なサイトを構築しています。これはhtmlです：

<a href="#targetpage.html" onclick="menu('targetpage.html');"> TARGET PAGE</a>

これは、次の非常に単純な関数を呼び出します。

var menu = function(page){ $('#article').load(page); //other code };

それは正常に動作します。

ただし、ユーザーが などの永続的なリンクを使用できるようにしたいので www.mysite.com/index.html#targetpage.html、js が URL のハッシュ値を読み取り、それに応じて div を設定することを期待しています。

問題は、値 window.location.hash を関数に渡そうとすると (ロード時または準備完了状態で)、すべてがスタックし、js が機能しなくなることです。load() 関数の代わりに ajax() も試しましたが、値も受け入れません。

編集 しようとしたら

var thispage = document.location.hash;
var hash = thispage.replace( /^#/, '' );

mysite.com/#page_one.html と入力すると、アラートに次のように表示されます。

page_one.html,

それは大丈夫です!!! しかしその後

menu(hash);

page_one.html のコンテンツを div にロードしません。ただし、私のメニューをクリックすると正常に動作します。js コンソールには、エラーも警告もありません。関与するコード全体は次のとおりです。

<head><script type="text/javascript" charset="iso-8859-1">
var thispage = document.location.hash;
var hash = thispage.replace( /^#/, '' );
alert(hash);
menu = function(page){
    $('#article').load(page);
    };
menu(hash);
</script>
</head>
<body>
<div id="menu">
<ul>
<li><p class="menuvoice">
        <a href="#page_one.html" onclick="menu('page_one.html');">
            Page One</a></p></li>
<li><p class="menuvoice">
        <a href="#page_two.html" onclick="menu('page_two.html');">
            Page Two</a></p></li>
</ul>
</div>
<div id="article"></div>
4

3 に答える 3

1

これを試して：

var hash = window.location.hash;
if (hash) {
  var hash = hash.replace(/#/, '');
  // Your function using hash
}
于 2012-04-25T08:31:55.457 に答える
1

jQuery hashchange プラグインを使用するのはどうですか?

http://benalman.com/projects/jquery-hashchange-plugin/

現在のハッシュが変更されたとき (つまり、リンクをクリックしたり、新しいハッシュでページをリロードしたとき) に、現在のハッシュを解析する作業を処理します。

編集。使用例:

$(function(){
  // Bind an event to window.onhashchange that, when the hash changes, gets the
  // hash and adds the class "selected" to any matching nav link.
  $(window).hashchange( function(){
    var hash = location.hash;

    // Set the page title based on the hash.
    document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';

    // Iterate over all nav links, setting the "selected" class as-appropriate.
    $('#nav a').each(function(){
      var that = $(this);
      that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'selected' );
    });
  })

  // Since the event is only triggered when the hash changes, we need to trigger
  // the event now, to handle the hash the page may have loaded with.
  $(window).hashchange();
});
于 2012-04-25T08:25:42.740 に答える
1

コンソールにエラー出力が表示されますか? これは、問題を特定するのに役立ちます。

取得したハッシュ値を「メニュー」関数に送信する前にアラートを出すことができるので、それが正しいかどうかがわかります (# 記号がハッシュに添付されていないのではないかと思います。これはあなたの場合に問題を引き起こすと思います)

于 2012-04-25T08:30:43.673 に答える