突出显示特定序列的控制选项卡链接在flexslider中滑动

Question

我一直在实现flex滑块的代码，它允许flex滑块外部的链接/按钮定位具有LJ902提供的rel标签的特定幻灯片： jQuery FlexSlider hide Slider but retain visibility of Manual Controls

现在我很好奇我如何能够更改定位链接/按钮的css状态（给它一个不同的彩色背景以指示它的活动状态），当flex滑块位于幻灯片的一部分内时。

因此，例如在下面的示例中，当滑块处于图像images / section2-Image01.jpg至图像/ section2-Image03之间的状态时，第2部分的滑动 - 拇指链接的css状态发生变化，在第3部分中滑动了第3部分的滑动 - 拇指链接的css状态，并且第2部分的样式恢复到之前的状态。实质上创建类似于功能的选项卡，当用户滑动/点击进入下一部分时会流过这些功能

<a rel="0" class="slide_thumb" href="#">Section 1</a>
<a rel="3" class="slide_thumb" href="#">Section 2</a>
<a rel="6" class="slide_thumb" href="#">Section 3</a>

<div class="flexslider">
    <ul class="slides">
        <li>
            <img src="images/section1-Image01.jpg" />
            </li>
            <li>
            <img src="images/section1-Image02.jpg" />
            </li>
            <li>
            <img src="images/section1-Image03.jpg" />
            </li>
            <li>
             <img src="images/section2-Image01.jpg" />
            </li>
            <li>
            <img src="images/section2-Image02.jpg" />
            </li>
            <li>
            <img src="images/section2-Image03.jpg" />
            </li>
            <li>
             <img src="images/section3-Image01.jpg" />
            </li>
            <li>
            <img src="images/section3-Image02.jpg" />
            </li>
            <li>
            <img src="images/section3-Image03.jpg" />
            </li>
        </ul>
  </div>

有人可以帮我解决这个问题吗？在过去的这一天左右，我的平庸的开发技巧被这一点困扰。谢谢！