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

我有一个main image div#main#image，带有一个.feature#thumb div onClick，它显示了与#main#image div对应的图像。如何使#features dot ul li与.feature#thumb onClick的作用方式相同，并同时具有点导航控制器和.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>

---

到目前为止，您尝试了什么来实现您的愿望？我让其他部分工作，最后添加了#特性，并寻找解决方案使其协同工作。你能帮助我吗？

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');

    });

});