How to change the class on click?

Question

JavaScript

<?php if ($thumb || $images) { ?>
      <div class="left">
      
        <?php if ($thumb) { ?>
        <div class="image clearafter"> <a href="<?php echo $popup; ?>" class="jqzoom colorbox" rel='gal1' title="<?php echo $heading_title; ?>" > <img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" width="<?php echo $this->config->get('config_image_thumb_width'); ?>" height="<?php echo $this->config->get('config_image_thumb_height'); ?>" /> </a> </div>

        <ul class="thumblist clearafter">
          <?php if ($images) { ?>
          <?php foreach ($images as $image) { ?>
          <li> <a href="<?php echo $image['popup']; ?>" class="ret" rel="{gallery: 'gal1', smallimage: '<?php echo $image['popup']; ?>',largeimage: '<?php echo $image['popup']; ?>'}"> <img src='<?php echo $image['thumb']; ?>' /> </a> </li>
          <?php } ?>
          <?php } ?>
        </ul>
    
      
      </div>
      <?php } ?>
      <?php } ?>

Tell me how to do that when clicking in the div class="image clearafter" area, replace the class class="ret" with class="colorbox"

Answer 1

jQuery onClick, addClass, removeClass