一个JS代码的图像链接也错误地调用了第二个JS代码

Image link to one JS code also invoking a second in error

本文关键字：代码 JS 调用 第二个 错误 链接 图像 一个      更新时间：2023-09-26

我有点被难住了！我有一个包含两个图像链接的页面，一个从屏幕底部向上滑动一个div（参见下面的代码1），另一个显示一个隐藏的div（参见代码2）。独立地，它们都是一种享受，但当在同一页面上，当单击链接显示隐藏的div时，似乎也调用了代码1，从底部向上滑动div。

滑动div的链接在该页面上运行良好。

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

代码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>

问题不在于"glossary"窗格向上滑动。事实并非如此。整个页面视口正在向下滚动。

正因为如此：

<a href="#1"

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

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="#" 可以避免该问题

相关文章：