Question

我需要为底部的标签提供一些正确的滚动解决方案。可以在this link

查看工作代码

检查网页设计的页脚链接等.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;
    });    
});

问题是：当点击一个链接时，窗口会正确向下滚动，但是当点击另一个链接时，页面中会出现一个小的混蛋。也是再次点击相同的链接。滚动显示但内容未隐藏。

Answer 1

我第二次点击同一链接时才会看到问题。尝试通过检查是否已将您的课程设为“有效”来检查是否已点击该链接。如果已经点击过，请不要重新加载任何内容：

$(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;
   }
 }); 
});

看我的小提琴here

Answer 2

您的点击处理程序代码可以分解为以下步骤

从所有li中删除课程
将类添加到点击的li。
隐藏所有信息div。
显示点击了李的信息div。

如您所见，您始终显示点击的li的信息div。这就是为什么你遇到第二个问题（点击同一个链接并不隐藏信息）。

关于第一个问题，如果我们删除动画以滚动到文档底部，那么混蛋就不再存在了。只有当信息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代码，请在评论中提问。

Jquery滚动到页面底部

2 个答案: