0

アイコンリンクのセットがクリックされると、divレイヤーがコンテンツ領域にアニメーション化され、ユーザーが「閉じる」ボタンをクリックしてdivを逆にアニメーション化する必要がある、単純なメカニズムを使用して構築したプロジェクトがあります、つまり、不透明度を 0 に設定し、ビューからスライドして戻します。

div 'open' には、外部ページへのリンクがあります ('GO' というラベルが付いています)。現在、新しいタブ/ウィンドウでそれらを開いています。ただし、クライアントは、外部ページ リンクにアクセスしてブラウザの [戻る] ボタンをクリックした場合に、div が「開いた」状態のままであることを好みます。

私が構築した方法を完全に再設計することなく、これを設定する比較的簡単な方法を知っている人はいますか? それとも、ある種の高度なプラグインとコードの完全な作り直しが必要ですか?

div を開く jQuery は次のとおりです。

var triggerPanels = function(){
for(i=1; i <= 9; i++){
(function(e) {
var trigger = $("#iconTrig" + i);
var panel = $("#pane" + i);
$(trigger).click(function(){
    $(panel).animate({
     right: 0, opacity: 1
      }, 500 );

    return false;
});
 })(i);
 }
};

このページの作業バージョンへのリンクはここにあります。[Enter] ボタンをクリックしてから、アイコンの 1 つをクリックすると、その動作が表示されます。どんな助けでも大歓迎です。ありがとう！ http://dev.seanchristiandampier.com/asia-timber/index-dev-new.html

更新: クライアントは、リンクを新しいタブで開くだけでよかったので、履歴の目的でハッシュを使用する必要がなくなりました。ただし、ここでのコメントと回答はすべて解決策を示すのに役立ちます。概念を吸収して、機能させることができるかどうかを確認するために、自分でこれを少しいじるかもしれません。ありがとう！

4

1 に答える 1

1

コードの詳細はわかりませんが、ウィンドウ履歴にフックするのは比較的簡単な作業です。ハッシュ (URL の # 以降のすべて) を使用して、ロジックを作成できます。

非常に簡単な解決策：

<div class="div">TheColor</div>
<a href="#blue">Blue</a>
<a href="#red">Red</a>​

次に、jQuery を使用します。

//capture the hash change event and do what you want with the window hash.
$(window).on('hashchange',function(e){
    $('.div').css('background-color',window.location.hash.replace('#',''));
});

//Used to trigger the above event if someone links to the page with the hash set already.
$(window).trigger('hashchange');

作業例 (jsFiddle は Iframe を使用しているため、ハッシュは表示されませんが、ブラウザーのボタンと戻るボタンをクリックしてみてください): JSFIDDLE

于 2012-12-03T16:32:31.500 に答える