超連結按鈕點選變色，原來的連結恢復原色
阿新 • • 發佈：2018-11-30
視訊播放列表的超連結按鈕點選變色，原來的恢復原色，主要是讓使用者清楚的知道此刻播放的是哪一集。這裡所說的實現方法並不是利用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視訊解析感興趣的朋友，歡迎來交流哦。