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

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

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

时间:

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');


}



原作者:
...