html-a标签href点击不跳到顶部(无效跳转)解决

本文探讨了HTML中a标签不添加任何值时,默认跳转到页面顶部的问题,并提供了三种解决方案:使用#、javascript:; 和 javascript:void(0);来避免无效跳转。
a标签如果不添加任何值,会默认跳到顶部,如下

<a href="">点击会跳到顶部</a>

解决以上问题可以用下面三种方式
	 <a href="###">点击无效跳转</a>
     <a href="javascript:;">点击无效跳转</a>       //qq空间用
     <a href="javascript:void(0);">点击无效跳转</a>  //新浪微博用
<li class="dropdown"> <a href="#" class="dropbtn" id="dropbtn">新品上市 ▼</a> <ul class="dropdown-content"> <li><a href="#">量子机甲系列</a></li> <li><a href="#">高达系列</a></li> <li><a href="#">星环战甲系列</a></li> </ul> </li> <!-- 热销榜单 - 带下拉 --> <li class="dropdown"> <a href="#" class="dropbtn" id="dropbtn">热销榜单 ▼</a> <ul class="dropdown-content"> <li><a href="#">高达 RX-78</a></li> <li><a href="#">泰坦重装机甲</a></li> <li><a href="#">赛博格X-9</a></li> </ul> </li> <li><div class="forum" id="forum">论坛</div></li> <li><div class="news" id="news">消息</div></li> <li><div class="dynamic" id="dynamic">动态</div></li> <li><div class="about" id="about">关于我们</div></li> <li><div class="server" id="server">联系客服</div></li> </ul> </nav> <script> // 获取元素并添加点击事件 document.getElementById('dropbtn').addEventListener('click', function() { window.location.href = 'new product.html'; }); document.getElementById('dropbtn').addEventListener('click', function() { window.location.href = 'saletop.html'; }); document.getElementById('forum').addEventListener('click', function() { window.location.href = 'Forum.html'; }); document.getElementById('news').addEventListener('click', function() { window.location.href = 'news.html'; }); document.getElementById('dynamic').addEventListener('click', function() { window.location.href = 'Dynamic.html'; }); document.getElementById('about').addEventListener('click', function() { window.location.href = 'about.html'; }); document.getElementById('server').addEventListener('click', function() { window.location.href = 'Customer Service.html'; // 跳转到 Customer Service.html }); </script> 为什么能实现点击跳转页面
最新发布
10-31
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值