单击a标签不跳转的设置,a标签更多设置说明

https://blog.csdn.net/wxl1555/article/details/53897841

一、让a标签点击后不跳转可以设置成
1.<a href="javascript:void(0);" >javascript:void(0);</a> 
2.<a href="javascript:;" >javascript:;</a> 
3.<a href="" οnclick="return false;">return false;</a>    这个会刷新页面
4.<a href="#" οnclick="return false;">return false;</a>   这个会刷新页面
5.<a href="##" >##</a>    这个会刷新页面
6.<a href="####" >####</a>      这个会刷新页面
7.<a href="#all" >#all</a>  这个会刷新页面

二、如果想点击超链接调用js方法的话可以设置成 
1.<a href="javascript:void(0)" οnclick="jsFun()">jsFun</a> 
2.<a href="#" οnclick="jsFun();return false;">jsFun();return false;</a>                
3.<a href="#" οnclick="alert(1);event.returnValue=false;">alert(1);event.returnValue=false;</a> 

三、更多说明
1.javascript:void(0)不建议使用 (但我平时还是用这个比较多。。。)

2.链接(href)直接使用javascript:void(0)在IE中可能会引起一些问题,比如:造成gif动画停止播放等,所以,最安全的办法还  是使用“####”。为防止点击链接后跳转到页首,onclick事件return false即可,<a>这个标签的执行顺序应该是先执行onclick 的脚本,最后才进行href参数指定页面的跳转。在onclick中返回false,就可以中止<a>标签的工作流程,也就是不让页面跳转到href参数指定的页面。 

3.如果仅仅是想鼠标移过,变成手形,可以使用 
<span style="cursor:pointer" οnclick="jsFun()">手型!</span> 

4.阻止默认行为
在方法里一定要传参event,而且还要写完整!写e或者不写,谷歌都可以,但是火狐,360,ie都不行,必须写完整!!!但是IE还是不兼容,所以得这么写

function stopDefault(event) { 
    if ( event.preventDefault ){
        event.preventDefault();  //支持DOM标准的浏览器
    } else { 
        window.event.returnValue = false;  //IE
    } 

这么写,就可以兼容ie(7+,6不知道),谷歌,火狐,360了

event.isDefaultPrevented()方法来检查指定的事件上是否调用了preventDefault() 方法。

event.stopPropagation();//取消冒泡

在京东快速购物导航页面的设计中,我们可以利用HTML和CSS以及JavaScript或者jQuery来实现这种功能。首先,你需要创建一个包含各类商品版块标签(如家电、数码、服装等)的列表。每个标签可以添加`<a>`标签,并设定一个类别相关的数据属性(例如"data-section"),代表你要跳转的版块路径。 ```html <ul class="nav"> <li><a href="#home" data-section="home">首页</a></li> <li><a href="#electronics" data-section="electronics">家电</a></li> <li><a href="#computers" data-section="computers">数码</a></li> <li><a href="#clothing" data-section="clothing">服装</a></li> <!-- 添加更多分类 --> </ul> ``` 然后,在CSS中你可以为这些链接设置样式,比如颜色、字体和悬停效果。点击事件通常通过JavaScript处理: ```javascript // 如果使用jQuery $('.nav a').click(function(e) { e.preventDefault(); // 阻止默认的跳转行为 const section = $(this).data('section'); window.location.hash = section; // 跳转到对应的位置,如 #electronics }); // 或者使用纯JavaScript document.querySelectorAll('.nav a').forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); const section = this.getAttribute('data-section'); window.location.hash = section; }); }); ``` 当用户单击某个F*链接(假设F*就是`electronics`或者其他自定义别名),页面会自动滚动到对应版块。注意,这需要目标版块在HTML中也有相应的锚点(如`<section id="electronics">...</section>`)。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值