如何去掉button、img、a点击时的边框

在做页面的时候,有时候会发现点击一些按钮会自带一些边框,这是浏览器添加的,但是自己并不想要,那么很简单,

就是在给这些有按钮的地方去掉边框

css添加:outline:none

有时候发现点击img的时候也会有,但是添加这个css并没有解决,怎么回事?

其实img本身是点击没有任何边框的,基本是自己添加了有点击效果的标签,例如a,看看自己写的时候是不是这样:

<a href="..."><img src="..."></a>

这时候点击图片的时候就会发现有边框,当自己给img添加outline:none的时候没有去掉边框,其实应该是给a标签添加outline:none,这时候再去点击img就会发现没有那个边框了

一般会出现边框的按钮:select、a、button、input

要实现鼠标点击显示相应图片的焦点图轮播,可以在JS部分添加事件监听器,监听每个控制按钮点击事件,然后根据当前点击按钮的索引值来切换轮播项。 以下是一个示例代码: ``` const sliderItems = document.querySelectorAll('.slider-item'); const controlBtns = document.querySelectorAll('.slider-control button'); let currentIndex = 0; let timer = null; // 切换轮播项函数 function changeSlider(index) { // 移除所有轮播项的active状态 sliderItems.forEach((item) => { item.classList.remove('active'); }); // 设置当前轮播项的active状态 sliderItems[index].classList.add('active'); } // 遍历控制按钮,添加点击事件监听器 for (let i = 0; i < controlBtns.length; i++) { controlBtns[i].addEventListener('click', function() { // 获取当前点击按钮的索引值 const index = parseInt(this.getAttribute('data-index')); // 切换轮播项 changeSlider(index); // 更新当前轮播项的索引值 currentIndex = index; // 停止定器 clearInterval(timer); // 重新开始定器 timer = setInterval(playSlider, 3000); }); } // 开始轮播 timer = setInterval(playSlider, 3000); function playSlider() { // 切换到下一个轮播项 currentIndex++; if (currentIndex >= sliderItems.length) { currentIndex = 0; } // 切换轮播项 changeSlider(currentIndex); } ``` 在HTML部分,需要为每个控制按钮添加一个data-index属性,用于标识该按钮对应的轮播项的索引值。在CSS部分,需要设置控制按钮的样式,如大小、边框、背景色等。 ``` <div class="slider"> <div class="slider-item active"> <img src="image1.jpg" alt="image1"> <h3>标题1</h3> </div> <div class="slider-item"> <img src="image2.jpg" alt="image2"> <h3>标题2</h3> </div> <div class="slider-item"> <img src="image3.jpg" alt="image3"> <h3>标题3</h3> </div> ... <div class="slider-control"> <button data-index="0"></button> <button data-index="1"></button> <button data-index="2"></button> ... </div> </div> .slider-control button { width: 16px; height: 16px; border: 1px solid #ccc; background-color: #fff; margin-right: 10px; cursor: pointer; } .slider-control button.active { background-color: #333; border-color: #333; color: #fff; } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值