首页 » 前端技术 » 如何解决点击A链接不跳转页面却能改变href值

如何解决点击A链接不跳转页面却能改变href值

高蒙 2016/11/09 19:19 3.2k浏览 0评论 jQuery/js


有时候可能有这样的需求,当我点击a链接的时候,不需要实现跳转但是可以改变href中的值。有人会问为什么要用a,

为什么不使用其他的标签呢。我只能说我的需求就是这样的。

刚拿到这个问题,我觉得可以用javascript:void(0);防止跳转,但是问题来了,我还要重新的赋值href,当我点击

的时候还是会把javascript:void(0);改掉,再次的点击就会跳转。终于找到了解决的方法。在a标签上面加上onclick="return false;"即可解决问题。

具体实现的代码:

<a href="play" class="bf" data="3" onclick="return false;">录音</a>
<script>
    $('.bf').click(function(){
        var bf = $(this).attr('data');
        if(bf == 1){
            $(this).attr('data','2');
            $(this).attr('href','stop');
            $(this).text('暂停');
        }
        if(bf == 2){
            $(this).attr('data','3');
            $(this).attr('href','send');
            $(this).text('发送');
        }
        if(bf == 3){
            $(this).attr('data','1');
            $(this).attr('href','play');
            $(this).text('录音');
        }
    });
</script>

上面的方法,很轻松的解决了点击A链接不跳转页面却能改变href值的问题。





相关文章

我有话说

站长昵称:(*)

输入内容:

选个头像:

评论列表

    ...

    高蒙

    男, PHP程序猿

    文章

    485

    标签

    42

    热度

    10w+

    南京, 江苏, 中国

    人生要是没有理想, 那跟咸鱼有什么分别。