0

我在这里有点难过！我有一个带有两个图像链接的页面，一个从屏幕底部向上滑动一个 div（参见下面的代码 1），另一个显示隐藏的 div（参见代码 2）。独立地他们都工作，但是当在同一页面上时，当单击链接以显示隐藏的 div 时，代码 1 似乎也被调用，从底部向上滑动 div。

滑动 div 的链接在该页面上工作正常。

我不确定它是否重要，但该页面是一个 php 文档，其中代码 1 是一个页面的一部分，代码 2 和下面的 HTML 是通过 php include 调用的额外文档的一部分。希望这是有道理的

代码 1

<script>
$(function () {
    $("#clickme").toggle(function () {
        $(this).parent().animate({top:'128px'}, {queue: false, duration: 500});
    }, function () {
        $(this).parent().animate({top:'1083px'}, {queue: false, duration: 500});
    });
});
</script>

代码 2

<script>
function show() {
    if(document.getElementById('clear_list_wrapperID').style.display=='none') {
      document.getElementById('clear_list_wrapperID').style.display='block';
    }
}    
</script>

HTML - 这是问题链接

<div class="clear_list_button" >
<a href="#1" name="1" onclick="show();">
<img src="images/transparent.png" width="315" height="100" />
</a>
</div>
4

1 回答 1

0

问题不在于“词汇表”窗格向上滑动。它不是。您的整个页面视口正在向下滚动。

正因为如此：

<a href="#1"

#1锚点位于页面下方。该链接将您带到它，有效地为您向下滚动页面。为了阻止这种情况的发生，return false在show函数结束时。

function show() {
    if(document.getElementById('clear_list_wrapperID').style.display=='none') {
      document.getElementById('clear_list_wrapperID').style.display='block';
    }
    return false;
}

编辑更好的功能是这样的：

function show(e) {
    e.preventDefault();
    if(document.getElementById('clear_list_wrapperID').style.display=='none') {
      document.getElementById('clear_list_wrapperID').style.display='block';
    }
}

有关 preventDefault 的说明，请参见此处：http: //davidwalsh.name/javascript-events

编辑

原来这个问题可以通过<a href="#1"改为<a href="#"

于 2013-07-01T18:39:11.657 回答