如何只显示被点击的div的边框？
如何只显示被点击的div的边框？
提问于 2019-01-10 20:16:57
我需要在这个jquery或javascript问题上的帮助。我有许多带有一些特定id的div，单击div，边框应该改变，然后单击另一个具有不同id的div，那个div的边框再次改变，就像以前的div一样，但是以前的div的边框被移除了。
回答 6
Stack Overflow用户
发布于 2019-01-10 20:33:27
<style>
.mydiv {
width:100px;
height:100px;
background-color:yellow;
float:left;
margin:10px;
}
.active{
border: 10px solid black;
}
</style>
<div class="mydiv">A</div>
<div class="mydiv">B</div>
<div class="mydiv">C</div>
<script>
$(".mydiv").click(function(){
$(".mydiv").removeClass('active');
$(this).addClass('active');
});
</script>Stack Overflow用户
发布于 2019-01-10 20:47:04
请看下面的代码片段，看看我的尝试。它所做的是，一旦您使用类clickable单击某个div，代码就会从前一个div中删除border类，将border类添加到新单击的div中，并更新prevDiv。
我更喜欢这种方法，因为当其他人使用$('div').css('border', 'none');从每个div中删除所有边框时，此代码仅从先前单击的div中删除边框。从而允许您拥有具有预定义的border/border类的(非clickable) div。
let prevDiv;
$(".clickable").click(function(){
$(prevDiv).removeClass('border');
$(this).addClass('border');
prevDiv = $(this);
});.clickable {
width:100px;
height:100px;
margin: 10px;
display: inline-block;
margin-right: 25px;
}
.border {
border: 5px solid black;
}
#firstID {
background-color: red;
}
#secondID {
background-color: orange;
}
#thirdID {
background-color: lime;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clickable" id="firstID">Placeholder text</div>
<div class="clickable" id="secondID">Placeholder text</div>
<div class="clickable" id="thirdID">Placeholder text</div>
Stack Overflow用户
发布于 2019-01-10 20:20:50
试试这个：
// The class div class is the div tag if you want and Id replace
// Replace the . with a #
$(".the_div_class").click(()=>{
$(".the_div_class").addClass("the_border_class");
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54128547
复制相关文章
相似问题
腾讯云开发者
