如何避免在锚点(<a></a>)标记点击时刷新页面?

时间:2014-01-26 05:06:35

标签: javascript php jquery html

我正在创建一个动态网站。我的问题是当我点击以下标签时:

<a class="s-inte" href="set_interesantes.php?n=Frank Melo&u=f6e79cfe9c0ecc4c08dac4c860c4802b&back=http://localhost:8085/Something/success/profile.php?search_user=f6e79cfe9c0ecc4c08dac4c860c4802b&p=12&sa=f6e79cfe9c0ecc4c08dac4c860c4802b&i=2345123&dl=&iv=1">Interesante</a>

页面刷新,如何避免刷新页面?

3 个答案:

答案 0 :(得分:3)

您需要阻止点击事件的默认操作。

你可以做一个简单的内联处理程序,它将返回false

<a class="s-inte" onclick="return false" href="set_interesantes.php?n=Frank Melo&u=f6e79cfe9c0ecc4c08dac4c860c4802b&back=http://localhost:8085/Something/success/profile.php?search_user=f6e79cfe9c0ecc4c08dac4c860c4802b&p=12&sa=f6e79cfe9c0ecc4c08dac4c860c4802b&i=2345123&dl=&iv=1">Interesante</a>

或编写一个jQuery处理程序,它将执行相同的操作

$('.s-inte').click(function(e){
    e.preventDefault()
})

答案 1 :(得分:2)

您想要完成的是更新一些感兴趣的计数器而不刷新页面? 你应该使用AJAX技术来实现它,这就是AJAX的发明。

考虑以下代码,它是最容易的(需要jQuery库):

<a href="#" class="counter">Interesante</a>

<script>
$(function(){
    $("a.counter").click(function()
    {
         $.get("set_interesantes.php?n=Frank Melo&u=f6e79cfe9c0ecc4c08dac4c860c4802b&back=http://localhost:8085/Something/success/profile.php?search_user=f6e79cfe9c0ecc4c08dac4c860c4802b&p=12&sa=f6e79cfe9c0ecc4c08dac4c860c4802b&i=2345123&dl=&iv=1" );
         .... // you can do some animation here, like a "Liked!" popup or something
         return false; // prevent default browser refresh on "#" link
    });
});
</script>

答案 2 :(得分:0)

如果您使用ajax动态加载内容。您应该以这种方式调用它。这样,无论是动态还是静态添加,它都适用于.s-inte类的每个锚。

$(document).on('click', '.s-inte',function(e){
    e.preventDefault();

    // Do more stuff every anchor click here...
});