1

下部のタブに適切なスクロール ソリューションが必要です。作業コードは次の場所で見ることができます:このリンク

Web デザインなどのフッター リンクを確認します。jquery コードは次のとおりです。

$(document).ready(function() {    
    $('.locations div').hide();
    $('#footer ul.left li a').click(function() {
        $('#footer ul.left li').removeClass('active');
        $(this).parent().addClass('active');
        var currentTab = $(this).attr('href');
        $('.locations div').hide("normal");
        $(currentTab).show("normal");
        $("html, body").animate({
            scrollTop: $(document).height()
        }, "normal");
        return false;
    });    
});​

問題は、リンクをクリックするとウィンドウが適切にスクロールダウンするが、別のリンクをクリックするとページに小さな動きが生じることです。同じリンクをもう一度クリックした場合も同様です。スクロールは上がりますが、内容は隠されません。

4

2 に答える 2

0

クリック ハンドラー コードは、次の手順に分解できます。

  1. すべての li からクラスを削除します
  2. クリックされたliにクラスを追加します。
  3. すべての情報 div を非表示にします。
  4. クリックされた li の情報 div を表示します。

ご覧のとおり、クリックされた li の情報 div が常に表示されています。これが 2 番目の問題を抱えている理由です (同じリンクをクリックしても情報が非表示になりません)。

最初の問題に関しては、ドキュメントの一番下までスクロールするアニメーションを削除すると、ぎくしゃくしなくなります。情報 div が存在しない場合、つまり「アクティブ」クラスの li がない場合にのみ、一番下までスクロールを実装することを選択できます。

クリック ハンドラの疑似コード

find li with class active.
- if not found
  - add class to current li. show current li's info div. scroll to bottom.
- if found,
  - check whether li is same as the li we clicked on.
    - if yes,
      - hide the current li's info div. exit the function.
    - if no,
      - hide the info div for the currently active li.
      - show the info div for the li clicked on.

これに js コードが必要な場合は、コメントで質問してください。

于 2012-07-02T18:22:34.293 に答える
0

同じリンクをもう一度クリックしたときにのみ問題が発生します。クラスが「アクティブ」であるかどうかを確認して、リンクがクリックされたかどうかを確認してください。すでにクリックされている場合は、何もリロードしないでください。

$(document).ready(function(){
 $('.locations div').hide();
  $('#footer ul.left li a').click(function(){
   if (!$(this).hasClass('active')){  //If it HASN'T been clicked yet
    $('#footer ul.left li').removeClass('active');
    $(this).parent().addClass('active');
    var currentTab = $(this).attr('href');
    $('.locations div').hide("normal");
    $(currentTab).show("normal");
    $("html, body").animate({ scrollTop: $(document).height() }, "normal");
    return false;
   }
 }); 
});

ここで私のフィドルを参照してください

于 2012-07-02T17:11:29.760 に答える