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>

单击“链接”时阻止跳转到页面顶部

2 个答案: