胡神

导航

jQuery事件的绑定

<script language="javascript" src="jquery-1.5.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){

// $('#normal').bind('click',function(){
//  $('body').removeClass('large').removeClass('narrow');
// });
// 
// $('#large').bind('click',function(){
//  $('body').addClass('large').removeClass('narrow');
// });
// 
// $('#narrow').bind('click',function(){
//  $('body').addClass('narrow').removeClass('large');
// });
// 
// 
// $('#test1 .button').bind('click',function(){
//  $('#test1 .button').removeClass('selected');
//  $(this).addClass('selected');
// });

//或
// $('#normal').bind('click',function(){
//  $('body').removeClass();
// });
// 
// $('#large').bind('click',function(){
//  $('body').addClass('large').removeClass('narrow');
// });
// 
// $('#narrow').bind('click',function(){
//  $('body').addClass('narrow').removeClass('large');
// });
// 
// 
// $('#test1 .button').bind('click',function(){
//  $('#test1 .button').removeClass('selected');
//  $(this).addClass('selected');
// });
 //或
//  $('#test1 .button').bind('click',function(){       //事件执行顺序
// 
//     $('body').removeClass();
//  $('#test1 .button').removeClass('selected');
//  $(this).addClass('selected');
// });
// 
// $('#large').bind('click',function(){
//  $('body').addClass('large').removeClass('narrow');
// });
// 
// $('#narrow').bind('click',function(){
//  $('body').addClass('narrow').removeClass('large');
// });
// 
 
 $('#test1 .button').click(function(){        
 //$('#test1 .button').bind('click',function(){    
     $('body').removeClass();
  if(this.id=='large')
   $('body').addClass('large');
  else if(this.id=='narrow')
   $('body').addClass('narrow');
  $('#test1 .button').removeClass('selected');
  $(this).addClass('selected');
 });
 
 

});
</script>

<style type="text/css">

body.large .chapter{ font-size:1.5em;}
body.narrow .chapter{ font-size:2.0em;}

.selected{ font-weight:bold;}

</style>

<body>
 <div  id="test1" class="chapter">
  <h3>事件绑定</h3>
  <div  class="button selected" id="normal">normal</div>
  <div  class="button" id="narrow">narrow</div>
  <div  class="button" id="large">large</div>
 </div>

</body>

posted on 2011-04-13 22:57  胡神  阅读(245)  评论(0)    收藏  举报