Question

我需要有关此jquery或javascript问题的帮助。我有很多具有某些特定ID的div，onclick上的div的边框应更改，而onclick另一个具有不同id的div，该div的边框再次更改，就像上一个div一样，但是上一个div的边框被删除了。

Answer 1

<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>

Answer 2

看看下面的代码片段，看看我的尝试。它的作用是，一旦单击具有类clickable的div，代码就会从上一个div中删除border类，将border类添加到新单击的div中并更新{ {1}}。

我更喜欢这种方法，因为在其他人使用prevDiv删除每个div的所有边框的情况下，此代码仅删除了先前单击的div的边框。因此，您可以拥有（非$('div').css('border', 'none');个）具有预定义border / 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;
}

Answer 3

尝试一下：

// 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>

Answer 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>

Answer 5

您可以使用 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');
}

Answer 6


    $('div').click(function(){
       $('div').css('border', 'none');
       $(this).css('border', '1px solid black');
    });

注意：将$(div)替换为相关父元素的ID或类。

如何仅显示单击的div的边框？

6 个答案: