js中实现点击一个元素加边框,点击另一个元素去掉前一个元素边框,当前元素加边框？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js中实现点击一个元素加边框,点击另一个元素去掉前一个元素边框,当前元素加边框？相关的知识，希望对你有一定的参考价值。
js中实现点击一个元素加边框,再点击另一个元素去掉上次点击元素的边框,当前元素加边框？
使用：.addClass('active').siblings().removeClass('active')；即可
解释：给当前选中的增加边框.addClass('active')
给原先选中的取消边框.siblings().removeClass('active')
详细如下：
<style type="text/css">
.clr:afterclear:both;display:block;overflow:hidden;height:0;content:".";
.clrzoom:1;
.pricewidth:100%;
.price awidth:100px;height:40px;line-height:40px;text-align:center;background:#eee;float:left;margin:0 5px;display:block;cursor:pointer;
.price a.activeborder:1px solid red;
</style>
<div class="price clr">
<a>5元</a>
<a>10元</a>
<a>100元</a>
<a>200元</a>
</div>
<script type="text/javascript" src="引用jquery.js或zepto.js"></script>
<script type="text/javascript">
$(function()
$('.price a').click(function()
$(this).addClass('active').siblings().removeClass('active');
);
);
</script>
效果如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,div
margin:0;
padding:0;
box-sizing: border-box;
.price
background-color: #ccc;
width:100px;
line-height: 32px;
text-align: center;
display: inline-block;
.active
border:1px solid red;
</style>
</head>
<body>
<div class="price">5</div>
<div class="price">15</div>
<div class="price">25</div>
<div class="price">35</div>
</body>
<script>
let num = 0;
document.querySelectorAll(".price").forEach((item,index)=>
item.onclick = ()=>
document.querySelectorAll(".price")[num].setAttribute("class","price");
num = index;
document.querySelectorAll(".price")[num].setAttribute("class","price active");
)
</script>
</html>
请采纳
安卓html元素被点击时产生的边框怎么去掉
安卓webview中的html界面，点击时产生的边框，可以在js的代码中给元素添加如下属性：-webkit-tap-highlight-color即可去掉边框。1.webkit内核的浏览器，当用户点击一个链接或者通过js定义的可点击元素的时候，会出现一个半透明的灰色背景或者红色的边框。
2.如果想要禁用高亮，可设置颜色的alpha值为0，也就是属性值的最后一位设置为0就可以去除背景或者边框。去除android链接触摸时产生边框的css代码
a,button,input-webkit-tap-highlight-color:rgba(255,0,0,0);/* 1.去除android a/button/input标签被点击时产生的边框 2.去除ios a标签被点击时产生的半透明灰色背景 */ 参考技术A 直接设置
*
outline:0
就可以了 参考技术B 请截图看看追答
安卓webview中的html界面，点击时产生的边框，可以在js的代码中给元素添加如下属性：-webkit-tap-highlight-color即可去掉边框。
1.webkit内核的浏览器，当用户点击一个链接或者通过js定义的可点击元素的时候，会出现一个半透明的灰色背景或者红色的边框。
2.如果想要禁用高亮，可设置颜色的alpha值为0，也就是属性值的最后一位设置为0就可以去除背景或者边框。去除android链接触摸时产生边框的css代码
a,button,input-webkit-tap-highlight-color:rgba(255,0,0,0);/* 1.去除android a/button/input标签被点击时产生的边框 2.去除ios a标签被点击时产生的半透明灰色背景 */
部分android系统中元素被点击时产生的边框怎么去掉
android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果
a,button,input,textarea
a,button,input-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-user-modify:read-write-plaintext-only;
-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符
另外，有些机型去除不了，如小米2
对于按钮类还有个办法，不使用a或者input标签，直接用div标签
上出处链接：www.cnblogs.com/PeunZhang/p/3407453.html
以上是关于js中实现点击一个元素加边框,点击另一个元素去掉前一个元素边框,当前元素加边框？的主要内容，如果未能解决你的问题，请参考以下文章