admin 管理员组

文章数量: 1086019

I would like to change the style on a div with an onclick... and remove the style when clicking somewhere outside of the div.

I have the following code setup... can someone help me to remove the style on the divs if you click anywhere else on the page?

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

Thank you very much for any help you can give me!!!

I would like to change the style on a div with an onclick... and remove the style when clicking somewhere outside of the div.

I have the following code setup... can someone help me to remove the style on the divs if you click anywhere else on the page?

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

Thank you very much for any help you can give me!!!

  • javascript
  • jquery
  • onclick
Share Improve this question asked Apr 27, 2012 at 14:26 lbriquetlbriquet 5413 gold badges12 silver badges27 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 6

The following should do it:

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

It binds the event handler to the entire document, so you'd have problems with any event handlers on more specific elements that call e.stopPropagation().

Try this.

$(document).ready(function(){
   $(".account").click(function(e){
       $(".selected").removeClass("selected");
       $(this).addClass("selected");
       e.stopPropagation();//This will stop the event bubbling 
   });   

   //This event handler will take care of removing the class if you click anywhere else
   $(document).click(function(){ 
       $(".selected").removeClass("selected");
   });
});

Working demo - http://jsfiddle/yLhsC/

Note that you can use on or delegate to handle click event on account elements if there are many on the page.

Something like this.

Using on if using jQuery 1.7+

$('parentElementContainingAllAccounts').on('click', '.account', function(e){
     $(".selected").removeClass("selected");
     $(this).addClass("selected");
     e.stopPropagation();//This will stop the event bubbling 
});

Using delegate

$('parentElementContainingAllAccounts').delegate('.account', 'click', function(e){
     $(".selected").removeClass("selected");
     $(this).addClass("selected");
     e.stopPropagation();//This will stop the event bubbling 
});

You can achieve this behavior with attaching click listener on body element e.g.:

$("body").click(function(){

});

Try this: 

$(document).ready(function() {

$('.account').click(function(e) {
    e.stopPropagation();
    $(this).addClass("selected");
});


$(document).click(function(){  
    $('.selected').removeClass('selected');
});
});

本文标签： javascriptOnclick change div styleonclick outside div remove style changeStack Overflow

版权声明：本文标题：javascript - Onclick change div style + onclick outside div remove style change - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744087454a2531396.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。