当缩略图被选中样式它

Question

我有一个页面，那里有视频缩略图(图像)，当点击它们时，视频在一个更大的div中播放。我有它们的样式悬停等，但当视频播放时，我希望当前缩略图的样式，这样他们就知道哪个缩略图正在播放。

我已经尝试添加一个活动类的缩略图div，但类的样式适用于所有的。谁能想出如何实现这一目标或我在哪里走错了，请?

<div class="main">
<iframe width="800" height="500" src="video-1.mp4" frameborder="0" allowfullscreen></iframe>
</div>
<ul>
<li class="thumbnail"><a href="video-1.mp4" class="video-1" title=""><img src="images/videoPlayer-thumbnail-1.jpg" alt=""/></a></li>
<li class="thumbnail"><a href="video-2.mp4" class="video-2" title=""><img src="images/videoPlayer-thumbnail-2.jpg" alt=""/></a></li>
<li class="thumbnail"><a href="video-3.mp4" class="video-3" title=""><img src="images/videoPlayer-thumbnail-3.jpg" alt=""/></a></li>
</ul>

Answer 1

如果页面没有刷新，您可以为单击的IMG添加class，然后您可以更改任何您想要的样式

编辑:

<li class="thumbnail">
  <a href="video-3.mp4?class=link1" class="video-3" title="">
     <img src="images/videoPlayer-thumbnail-3.jpg" alt=""/>
  </a>
</li>

并使用jQuery拆分URL并找到参数，然后匹配css路径