How to create navigation controller ul li that reflects active class

Question

I have a main image div #main_image with a .feature_thumb div onClick that displays its corresponding image to the #main_image div. How can I make the #features-dot ul li act the same way as the .feature_thumb and have both dot navigation controller as well as the .feature_thumb onClick?

Here is my html

<div id="container">
    <img id="main_image" src="thumb1.png" />
    <img id="main_image_back" />

    <div id="features-dots">
        <ul>
          <a href="#"><li class="active"></li></a>
          <a href="#"><li class=""></li></a>
          <a href="#"><li class=""></li></a>
        </ul>
    </div>
</div>

<div class="feature_thumb current">
    <a class="feature_thumb" id="feature_thumb1" onclick="return false;" href="thumb1.png">
      <p>thumb 1</p>
    </a>
</div>
<div class="feature_thumb">
    <a class="feature_thumb" id="feature_thumb2" onclick="return false;" href="thumb2.png">
      <p>thumb 2</p>
    </a>
</div>
<div class="feature_thumb">
    <a class="feature_thumb" id="feature_thumb3" onclick="return false;" href="thumb3.png">
      <p>thumb 3</p>
    </a>
</div>

and here is my js

jQuery(document).ready(function() {

    jQuery(".feature_thumb").on('click', function(){
       var main_href = jQuery(this).attr('href');
       change_image(main_href );
    });

    function change_image(main_href){
        jQuery("#main_image_back").attr("src", main_href).hide().fadeIn("fast", function(){
        jQuery("#main_image").attr("src", jQuery("#main_image_back").attr("src"));
        jQuery("#main_image_back").hide();
    });

        jQuery("#main_image").show().fadeOut("fast", function(){
        jQuery(this).show();});
    }

       jQuery(".feature_thumb a").click(function(event) {
       jQuery(event.target).closest(".feature_thumb").addClass("current").siblings().removeClass('current');

    });

});