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


网页超链接(按钮)点击变色,原来的恢复原色,这里所说的并不是利用css的link、hover、active所实现的,而是利用一小段js代码实现的。实现的效果为:我们看电影的时候,我们点击哪一集的链接,那么这个链接就会唯一变色,并且不会像css中的active失去焦点后恢复原色,能实时显示当前用户观看的电影集数。

原理:先定义一个变量t用来记录用户上一次点击的超链接id,当用户点击超链接的时候,会传入当前超链接的id,然后利用js改变其背景颜色为蓝色,并把t记录的上一次点击的超链接背景恢复原色,这样就能保证只有当前超链接背景色唯一不同。

下面是代码:

<!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>

效果图:

超链接(按钮)点击变色
文章转载自:http://www.gold404.cn/view.php?id=10戴上金箍去爱你的博客

关注微信公众号

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com