阻止a标签点击跳转刷新

最新推荐文章于 2023-03-29 16:18:28 发布
最新推荐文章于 2023-03-29 16:18:28 发布
阅读量9.6k 收藏
点赞数
分类专栏： php
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bai9474500755/article/details/50815539
版权


这是一个所有做前端都会遇到的问题；

布局是这样的，有一个宽高100px背景为红的div，默认是display：none 隐藏状态；

给两个a标签绑定的同一个click事件，改变div的display为block；让其显示；

但是第一个a标签点击后div刚出现立马就没有了；第二个a标签点击后div会正常显示；

scrolling="no" src="http://www.baijunyao.com/Demo/a_click.html" frameborder="0" align="">

初遇到这个问题的时候，马虎点的童鞋可能要迷茫很久都找不到原因，而细心点就会发现是a标签点击后页面刷新了，所以闪过；

一部分童鞋始终不知道怎么阻止a标签跳转，于是就换用其他标签，避免给a标签添加click事件；

但是呢，总还有一部分喜欢钻研的童鞋，如果你正好看到这，恭喜你，下面就是来带你脱离苦海的；

其实很简单；就是给a标签的href写空事件javascript:;

<a href="javascript:;" οnclick="test()">点我会正常显示</a>

完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset
最低0.47元/天 解锁文章
白俊遥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
A标签触发onclick事件而不跳转的多种解决方法
09-05
在这种情况下，我们需要采取措施来阻止A标签的默认跳转。以下是四种常见的解决方法： 1. **不用A标签，用CSS或JavaScript模拟**： 如果不需要A标签的默认行为，我们可以完全不使用A标签，而是使用其他HTML元素（如...
js 特效 html 特效 禁止刷新页面
08-17
js 特效 html 特效 禁止刷新页面 js 特效 html 特效 禁止刷新页面
移动端点击a标签和img标签以及添加的js点击事件时的闪屏问题 解决方案
ximenxiafeng的专栏
09-25 2794
试试这个： html{-webkit-tap-highlight-color:none} 或者 html{-webkit-tap-highlight-color:transparent;}
vue路由跳转闪回，点击跳转的a标签以后页面跳转成功后又闪回到原页面
weixin_44022713的博客
06-07 2129
vue初学时对概念的辩证思考
（6）＜a＞标签如何实现点击既不刷新也不跳转的功能
Java田根旺
11-11 5326
一、<a>标签跳转页面 相信大家对于<a>标签跳转到一个新网页的写法不陌生吧，这里如下举个跳转到百度的例子。 <a href="https://www.baidu.com">点击跳转到百度</a> 二、a标签之js调用方式1：调用js的某个方法，不建议使用 代码书写方式一： <a href="javascript:alert(111);">点击</a> 代码书写方式二： <a href="javascript:
JS中如何实现点击a标签返回页面顶部的问题
11-26
这个`<a>`标签没有`href`属性，因此点击它时浏览器不知道该去哪里，通常会跳转到当前页面的URL，这实际上等同于刷新页面，所以用户会被带回页面顶部。 要实现点击`<a>`标签返回页面顶部，可以使用`href="#"`，这会...
详谈vue中router-link和传统a链接的区别
10-15
其次，`<router-link>` 在HTML5 history 模式下会阻止默认的页面重载行为，这意味着点击`<router-link>` 不会导致页面整体刷新，而是仅仅替换当前视图。而在传统的`<a>` 标签中，点击链接会触发页面的完整加载，导致...
网页刷新页面
10-20
这可以通过点击浏览器上的刷新按钮、使用快捷键（如F5）或者通过编程方式实现。在JavaScript中，我们可以使用`location.reload()`方法来刷新当前页面。这个方法接受一个可选参数，如果设置为`true`，则强制从服务器...
后台管理禁止iframe刷新返回首页
09-01
5. **禁用`iframe`的刷新按钮**：虽然这可能影响用户体验，但作为一种备选方案，可以通过CSS或JavaScript隐藏或禁用`iframe`内的刷新按钮，防止用户意外点击导致的页面跳转。 6. **路由管理**：如果后台管理系统...
前端页面跳转出现闪烁，页面渲染不及时，html页面跳转或刷新时渲染出现闪屏，渲染顺序等问题的解决
qq_58805860的博客
10-07 5605
前端页面跳转出现闪烁，页面渲染不及时，html页面跳转或刷新时渲染出现闪屏，渲染顺序等问题的解决
html: 如何阻止点击a标签自动刷新当前页面
qq_38969618的博客
02-27 737
html: 如何阻止点击a标签自动刷新当前页面。
wap端使用a标签跳转不刷新问题
笨小蛋的博客
10-10 2485
1，情景描述：例如在一个企业网站手机端时，点击a标签，页面没有刷新。实际上当前页面的链接已经变了，但是页面内容却没有刷新。 2，解决方案：在a标签中加上属性值 target=“_top” 3，html中target=”_top”这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。也就是说设置这个属性后，强制性将文档清空并加载了一次，所以
a标签点击后阻止刷新当前页面
yhj198927的博客
12-30 1717
在html中，使用href属性返回空： <a href='javascript:void(0)'>禁止刷新当前页面</a>
如何阻止点击a标签刷新当前页面
Alice
01-02 6293
href="#" 修改为 href=“javascript:void(0)” href=“javascript:void(0)” &lt;ul&gt; &lt;li class="buy_aui_current"&gt;&lt;a href="javascript:void(0)"&gt;1个月&lt;/a&gt;&lt;/
关于jQuery Mobile页面跳转后网页不刷新问题
php菜鸟技术天地
12-27 4292
$.mobile.changePage("03.php"); //手机网页式跳转 转跳后，网页CSS，JS事件都没有反应，要刷新一次网页行有用 $.mobile.changePage这种方式，原理是ajax跳转。听起来很神秘，其实就是通过ajax动态的把目标页面的内容加载到当前的dom中。当多页面跳转的时候，通过ajax跳转，就存在ajax跨域的问题。所以解决 目前的问题，其实
JS中，a标签里的javascript:；和 javascript:void(0)还有##
weixin_72322475的博客
12-13 1814
JS中，a标签里的javascript:;和 javascript:void(0)还有##
阻止a链接点击跳转刷新
qq_68862343的博客
03-29 785
就是给a标签的href写空事件javascript:;但是第一个a标签点击后div刚出现立马就没有了；而细心点就会发现是a标签点击后页面刷新了；给两个a标签绑定的同一个click事件；改变div的display为block；马虎点的童鞋可能要迷茫很久都找不到原因；一部分童鞋始终不知道怎么阻止a标签跳转；有一个宽高100px背景为红的div；第二个a标签点击后div会正常显示；这是一个所有做前端都会遇到的问题；避免给a标签添加click事件；总还有一部分喜欢钻研的童鞋；下面就是来带你脱离苦海的；
a 标签进行页面跳转，并取消页面自动刷新
最新发布
07-12
可以使用以下代码将a标签设置为页面跳转，并取消页面自动刷新： ```html <a href="destination.html" onclick="event.preventDefault(); window.location.href = 'destination.html';">跳转到目标页面</a> ``` 这里的`destination.html`是你要跳转到的目标页面的URL。`onclick`事件会阻止a标签的默认行为（即页面跳转），然后使用`window.location.href`将页面跳转到目标页面。这样就可以实现在点击a标签时进行页面跳转，并取消页面的自动刷新。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值