javascript - javascript如何只显示点击的div边框?

  显示原文与译文双语对照的内容
127 3

这个jquery或者javascript问题有很多的div,但是div的边界会被改变,而且这个div的边界会被改变,像以前div的边界一样,这个div的边界会被改变,然后被删除。请尽快帮助我。

时间:原作者:0个回答

144 5
<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>
原作者:
141 4

查看 Fragment below 以查看我的尝试。当你单击带有类 clickable的div时,代码从前一个div中删除 border 类,将 border 类添加到新的单击的div 。

我更喜欢这种方法,因为它的他人使用 $('div').css('border','none'); 从每个div中删除所有边框。这样就可以让( 非 clickable ) div具有预先定义的边界/border 类。

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>
原作者:
51 4
$(".mydiv").click(function(){
$(this).css('border','10px solid black');
});
.mydiv
{
width:100px;
height:100px;
background-color:yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
 <title>Bootstrap Example</title>
</head>
<body>
<div class="mydiv">ABCD</div>
</body>
</html>
原作者:
78 0

你可以用的java脚本

let yourDivIds =["your_div1","your_div2"];//specify all your div ids
function removeGlowingDivs() {//this will remove class from other div's
 yourDivIds.forEach(item=>{
 document.getElementById(divID).removeClass('your_class_name');
 })
}
//add this on click event on all div's
function highlightDiv(divID) {//this will add class
 removeGlowingDivs();
 document.getElementById(divID).addClass('your_class_name');
}
原作者:
...