javascript - onclick 更改div 样式+ onclick 外部div 移除样式更改-6ren

javascript - onclick 更改div 样式+ onclick 外部div 移除样式更改

转载作者：行者123 更新时间：2023-11-30 07:27:11

我想通过单击更改 div 的样式...并在单击 div 外部某处时删除样式。

我有以下代码设置...如果您单击页面上的其他任何地方，有人可以帮我删除 div 上的样式吗？

<head>
  <style type="text/css">
     .account{
      width: 100px;
      height: 100px;
      border: 1px solid #000;
     }
    .selected{
     border: 2px solid #F00;
    }
  </style>
  <script type="text/javascript">
   $(document).ready(function(){
   $(".account").click(function(){
   $(".selected").removeClass("selected");
   $(this).addClass("selected");
  });   
  });
  </script>
</head>
<body>
 <h1>the test</h1>
 <div class="account">test 1</div>
 <div class="account">test 2</div>
</body>

非常感谢您能给我的任何帮助!!!

最佳答案

应该做到以下几点:

$(document).on('click', function(e) {
    if($(e.target).hasClass('account')) {
        // do style change
    }
    else {
        // undo style change  
    }
});

它将事件处理程序绑定(bind)到整个文档，因此您会遇到调用 e.stopPropagation() 的更具体元素上的任何事件处理程序的问题。

关于javascript - onclick 更改div 样式+ onclick 外部div 移除样式更改，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10352483/