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

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

您只需要使用preventDefault(); javascript中的方法，以阻止浏览器跟踪锚链接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>