js中实现点击一个元素加边框,点击另一个元素去掉前一个元素边框,当前元素加边框？
发布网友
发布时间：2022-04-23 02:22
共2个回答
热心网友
时间：2023-10-11 14:12
使用：.addClass('active').siblings().removeClass('active')；即可
解释：给当前选中的增加边框.addClass('active')
给原先选中的取消边框.siblings().removeClass('active')
详细如下：
<style type="text/css">
.clr:after{clear:both;display:block;overflow:hidden;height:0;content:".";}
.clr{zoom:1;}
.price{width:100%;}
.price a{width:100px;height:40px;line-height:40px;text-align:center;background:#eee;float:left;margin:0 5px;display:block;cursor:pointer;}
.price a.active{border: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>
效果如下：
热心网友
时间：2023-10-11 14:12
<!DOCTYPE html>
<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>
请采纳
