Jquery在div中显示和隐藏边框

Question

当我点击一个div时，我尝试在div中显示边框，并在每次点击时隐藏在另一个div中

CSS 代码

 <style>
  .active
     {
     border:4px solid red;
     }
 </style>

JQUERY 代码

<script>
function remove(idimg)
{   
    jQuery(".img_f"+idimg).click(function() 
    {   
        jQuery(this).removeClass('active')  
        jQuery(this).addClass('active');            
    }); 
}
</script>

HTML 代码

<div class="img_f1"></div>
<script>remove('1')</script>
<div class="img_f2"></div>
<script>remove('2')</script>
<div class="img_f3"></div>
<script>remove('3')</script>
<div class="img_f4"></div>
<script>remove('4')</script>
<div class="img_f5"></div>
<script>remove('5')</script>

问题是，当我单击第一个元素时显示红色边框，当我单击第二个元素时也显示红色边框，但直到元素边框才隐藏

我不知道如何修复并最终起作用

谨致问候并感谢您的帮助

Answer 1

这是因为您要从要将其添加到的同一项目中删除该类...

试试这个:

<script>
function remove(idimg)
{   
    jQuery(".img_f"+idimg).click(function() 
    {   
        jQuery('[class^="img_"]').removeClass('active')  
        jQuery(this).addClass('active');            
    }); 
}
</script>