如何去掉点击链接时周围的虚线框outline属性<转>

本文介绍了两种有效的方法来解决浏览器中点击链接后出现的虚线框问题,包括使用HTML属性hideFocus以及CSS样式设定,同时也提供了利用JavaScript实现的解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

如果全盘否定掉链接虚线框,对使用键盘的用户体验可能又是个大弊端。但这就是另外一个话题了,这里就不说了,不然就扯出UI设计和用户体验这个大话题了,我这小小的地方可说不清楚呢。

以下是解决方案:

 

方法一:
在IE下是使用html属性:hideFoucs,在HTML标签中加上hidefocus=”true” 属性即可,但这个属性是IE私有的,Firefox是不认的。

 

<href="#" hidefocus="true" title="加了hidefocus" >欢迎来到博客园(加了hidefocus属性)</a>


Firefox的处理方法比较符合标准,只需要在样式里设置a:focus{outline:none}皆可:

.xzw_test a.setFocus:focus{outline:none}

 

方法二:

 

通过javascript方法让其点击后失去焦点从而达到没有虚线框,也不失为一种曲线救国的方案:

 

1//通过判断可以指定某个必要的链接失去焦点
2if(j(this).attr("id")=="jsControl"
3  j(this).blur();

 

<!-- 搜索结果卡片示例 1 --> <div class="col-md-4"> <div class="card result-card"> <div class="card-body"> <div class="d-flex align-items-center mb-3"> <i class="fas fa-plane plane-icon me-3"></i> <div> <h5 class="card-title mb-0">【航班】MU5701</h5> <small class="text-muted">经济舱</small> </div> </div> <p class="card-text"><strong>出发:</strong>北京<br><strong>到达:</strong>上海</p> <p class="card-text"><strong>出发间:</strong>08:30  <strong>到达间:</strong>10:30</p> <p class="card-text"><strong>票价:</strong>¥800</p> <a href="#" class="btn btn-outline-primary">预订</a> </div> </div> </div> <!-- 搜索结果卡片示例 2 --> <div class="col-md-4"> <div class="card result-card"> <div class="card-body"> <div class="d-flex align-items-center mb-3"> <i class="fas fa-plane plane-icon me-3"></i> <div> <h5 class="card-title mb-0">【航班】CZ3035</h5> <small class="text-muted">商务舱</small> </div> </div> <p class="card-text"><strong>出发:</strong>北京<br><strong>到达:</strong>上海</p> <p class="card-text"><strong>出发间:</strong>10:00  <strong>到达间:</strong>12:00</p> <p class="card-text"><strong>票价:</strong>¥1500</p> <a href="#" class="btn btn-outline-primary">预订</a> </div> </div> </div> <!-- 搜索结果卡片示例 3 --> <div class="col-md-4"> <div class="card result-card"> <div class="card-body"> <div class="d-flex align-items-center mb-3"> <i class="fas fa-plane plane-icon me-3"></i> <div> <h5 class="card-title mb-0">【航班】HU7123</h5> <small class="text-muted">头等舱</small> </div> </div> <p class="card-text"><strong>出发:</strong>北京<br><strong>到达:</strong>上海</p> <p class="card-text"><strong>出发间:</strong>12:30  <strong>到达间:</strong>14:30</p> <p class="card-text"><strong>票价:</strong>¥2500</p> <a href="#" class="btn btn-outline-primary">预订</a> </div> </div> </div> 把这些数据换掉。。。
03-11
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值