超链接按钮点击变色,原来的链接恢复原色

2018-12-02 06:14:29来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

视频播放列表的超链接按钮点击变色,原来的恢复原色,主要是让用户清楚的知道此刻播放的是哪一集。这里所说的实现方法并不是利用css的link、hover、active所实现的,虽然css也能做到超链接点击变色,但是却不能用到这里的需求上,因为css实现的点击变色,是不能再点击页面其他地方的,很显然,看视频的时候不让用户点其他地方似乎不太现实,所以这里用js实现。

要实现的效果图:

这是我自己做的一个vip视频解析网站,而我现在要做的就i是实现那个点击集数播放的同时,那一集链接高亮变色,简单的说就是:我们看电影的时候,我们点击哪一集的链接,那么这个链接就会唯一变色,并且不会像css中的active失去焦点后恢复原色,能实时显示当前用户观看的电影集数。

实现的代码:

<!DOCTYPE html>
<html>
<head>
<style>
body{background-color:black;}
.acss{background-color:black;color:white;}
</style>
<script>
var t=1;
function test(x){
 // 这个是判断第一次点击
  if(x==1&&t==1){
  document.getElementById(x).style.background="blue";
  }
   // 这个判断是防止重复点击 
  else if(x!=t){
  document.getElementById(x).style.background="blue";
  document.getElementById(t).style.background="black";
  } 
  t=x;
}
</script>
</head>
<body>
<a class="acss" id="1" href="#" onclick="test(1)">第一集</a>
<a class="acss" id="2" href="#1" onclick="test(2)">第二集</a>
<a class="acss" id="3" href="#2" onclick="test(3)">第三集</a>
<a class="acss" id="4" href="#3" onclick="test(4)">第四集</a>
<a class="acss" id="5" href="#4" onclick="test(5)">第五集</a>
</body>
</html>

上面的代码实现的效果图:

代码很简单,效果图也不漂亮,没有写多余的代码,只是为了让其他同学能够一眼看透代码的本质,毕竟授人以鱼不如授人以渔嘛。

如果对此有疑问或者更好的建议,欢迎留言,我们一起探讨哦。

还有博主最近正在研究vip视频解析,一直想打造一个真正无广告的的vip视频解析站,如果有vip视频解析感兴趣的朋友,欢迎来交流哦。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Vue一个案例引发「内容分发slot」的最全总结

下一篇:【js】 ajax 与 axios 区别