Javascript 突出显示flexslider中特定序列幻灯片的控制选项卡链接

我一直在实现flex slider的代码，该代码允许flex slider外部的链接/按钮使用LJ902提供的rel标记瞄准特定幻灯片：

现在我很好奇，当flex滑块被放置在幻灯片的一部分中时，我如何才能改变目标链接/按钮的css状态（给它一个不同颜色的背景以指示它的活动状态）

例如，在下面的示例中，当滑块处于images/section2-Image01.jpg到images/section2-Image03之间的状态时，Section 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>

有人能帮我解决这个问题吗？在过去一天左右的时间里，我平庸的发展技能都被这个问题难倒了。谢谢