如何创建反映活动类的导航控制器ul li

Question

我有一个带有.feature_thumb div onClick的主图像div #main_image，它将相应的图像显示到#main_image div。我如何使＃features-dot ul li的行为与.feature_thumb相同，并且同时具有点导航控制器和.feature_thumb onClick？

这是我的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>

这是我的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');

    });

});