2012-03-17 10 views
0

私は一種の大きなメニューをページに表示しました。ユーザーはパネル内で一度に12個のアイテムを表示します。jQuery - ページ変更時のメニューの位置を記憶する

そのここで右側のメニュー、:http://bartlettstudio.com/

あなたはより多くのプロジェクトをクリックして、その第二パネルからのリンクを選択すると、あなたは私の問題を見ることができます。

は、例えば、この1を取る:あなたはそのページにいるときhttp://bartlettstudio.com/projects/dog-named-lucky/

、サイドバーのメニューは、最初のパネルに戻りますと、あなたがにしているものをメニュー項目指示する方法がありません。 「Dog Named Lucky」メニュー項目を表示するには、More Projectsをクリックする必要があります。

質問

は、誰も私がこの問題にアプローチする方法を見つけ出す手助けすることはできますか?他の人はjQueryのハッシュチェンジを使って言及していますが、それは私の頭上にあると証明されています。誰かがこれを解決する別の方法を考えることができますか?

<a href="#more-1" class="next">More Projects</a> 

その後、次のonClickあなたはjQueryの中でこのような何かを行うことができます。多くのおかげで

テリー

+0

更新の質問:jQuery haschangeはこのようなものに使用できますか?私は他のプロジェクトをクリックするとURLを変更していません。クッキーはこれを解決する唯一の方法ですか? – saltcod

+0

クッキーを使用することはできますが、それが合併症を追加するかどうかはわかりません。方法は次のとおりです。http://www.w3schools.com/js/js_cookies.asp –

答えて

1

で複数のプロジェクトのリンクはそれのhrefが言うことができます持っているように変更することができ

jQuery(function ($) { 

    if(window.location.hash) { 
     // onLoad hash was detected 
     console.log('onLoad hash detected // do something to position menu'); 

     // window.location.hash starts with a # following with the string behind it 
     // window.location.hash.slice(1) gets the string only 
    } 


    // This isn't needed but quessing you already have an onClick set up for this element... 
    $('a.next').click(function (e) { 
     /* 
     Don't do e.preventDefault()! The browser will add the href hash value itself if you only specified the hash! 
     If you want to preventit you will have to set the hash yourself like this: 

     window.location.hash = 'more-1'; 
     */ 

     // do stuff, possibly with the href value since you have it anyway 


     // I reccommend that you change the value of the href to specify the next hash value change 
     $(this).attr('href', '#more-2'); 
    }); 

}); 
+0

簡単なメモとして、あなたが戻ったり、ロードするプロジェクトがもうない場合、私はもっと多くのプロジェクトとバックリンクを隠してしまいます。 – sg3s

+0

これは本質的にjQuery hashchangeプラグインで使用するハッシュを追加しますか?それはアイデアですか? – saltcod

+0

プラグインは必要ありません。ハッシュを使用したい唯一の2回だけ、違ったキャッチが可能です。ユーザーがアンカーをクリックしてより多くのプロジェクトを表示したり、元に戻ったりしたいときは、既にクリックイベントで何かを実行しているので、認識できる小さなコードを追加するだけで済みますプロジェクトの正しいページを表示するために負荷をかけてください.... – sg3s

関連する問題