3

私は Qjuery の初心者で、自分の Web サイトを完成させるのに十分なだけのことを学ぼうとしています。

しばらく前に、sg3s は、私が探しているほとんどのことを行う最も優れたフィドルを書きました。ここにあります：http://jsfiddle.net/sg3s/RZpbK/

jQuery(function($) {

$('a.panel').click(function() {
    var $target = $($(this).attr('href')),
        $other = $target.siblings('.active'),
        animIn = function () {
            $target.addClass('active').show().css({
                left: -($target.width())
            }).animate({
                left: 0
            }, 500);
        };

    if (!$target.hasClass('active') && $other.length > 0) {
        $other.each(function(index, self) {
            var $this = $(this);
            $this.removeClass('active').animate({
                left: -$this.width()
            }, 500, animIn);
        });
    } else if (!$target.hasClass('active')) {
        animIn();
    }
});

}); </p>

これに加えたい変更が 2 つか 3 つあり、週末のほとんどをこれを理解しようとしましたが、成功しませんでした。

1: パネルを完全に閉じる 4 番目のトリガー (おそらく "trigger0") を設定します。以前のパネルは閉じられ、誰かが trigger0 以外のトリガーのいずれかにヒットしない限り、新しいパネルは開きません。

2: トリガー ボタンに背景画像を追加して、選択されたことを示したい。

3: これができるのか、それとも単に JQuery の副産物なのかはわかりません。トリガー ボタンを押した回数だけ戻るボタンを押すのではなく、戻るボタンを 1 回押して前のページに戻ることができると便利です。

これらの項目のいずれかに関するヘルプをいただければ幸いです、ボブ

4

1 に答える 1

1

遅い答えですが、これで上記の問題が解決すると思います

  1. 新しいパネルを追加し、「.active」クラス セットでパネルを非表示にします。コードのフィドルを参照してください
  2. 背景色を追加しました（同じタイプのコードを使用して簡単に画像に変更できましたが、画像が手元にありませんでした）。クリック機能では、最初にすべての背景を削除し$('a.panel').css('background', '');てから、現在クリックされているアイテムの背景を設定します$(this).css('background', 'red');
  3. クリックイベント機能を追加event.preventDefault();すると、href のデフォルトの動作が無効になります (href に移動します)。したがって、履歴をきれいに保ち、「戻る」ボタンで前のページに戻ります。

あなたの質問のものに基づいてフィドル

http://jsfiddle.net/7YHFa/

于 2013-02-01T18:47:47.210 に答える