单击链接时防止跳转到页面顶部

Question

我一直在思考如何在点击解析PHP数据的链接时防止跳到页面顶部。

我在互联网上尝试了很多AJAX的例子，但不幸的是没有成功。

链接如下：

<a class="bottle" href="index.php?step=<?php echo$step; ?>&bottle=b0"><img class="bottle" src="images/b0.jpg" /></a>

其中有113个链接，每个链接都位于index.php？上？，但单击时会跳到页面顶部。

该程序的预览如下：http://www.mtschools.net/aurasoma

Answer 1

您只需要在javascript中使用preventDefault();方法来阻止浏览器使用锚链接href位置。

<script type="text/javascript">
    var links = document.querySelectorAll('.bottle');
    for(var i = 0; i < links; i++){
        links[i].addEventListener('click', function(e){
            e.preventDefault();
            //alternatively return false;
            //the rest of the ajax code here.
        });
    }
</script>

您需要进行的任何ajax调用都可以在//the rest of the ajax code here之后完成。

Answer 2

使用不带HREF的链接，然后使用jQuery或CSS将CSS光标设置为指针。

这是一种可点击的链接。不是你问题的全部解决方案。

但你也可以有一个带名字的锚，所以当你点击时，你会移动到锚，也许会停留在锚上，而不是页面顶部？

<script>
    $().ready(function() {
        ('#link').css('cursor', 'pointer');
    });
</script>
<a id="link">Some Text</a>