1

我需要一些适当的滚动解决方案来处理底部的标签。可以在以下位置查看工作代码：此链接

检查网页设计等的页脚链接。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

我只在第二次单击同一链接时才看到问题。尝试通过检查您的课程是否“活动”来检查链接是否被点击。如果它已经被点击，不要重新加载任何东西：

$(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 回答
0

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

  1. 从所有 li 中删除课程
  2. 将类添加到单击的 li。
  3. 隐藏所有信息 div。
  4. 显示点击了 li 的信息 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 代码，请在评论中询问。

于 2012-07-02T18:22:34.293 回答