网页超链接（按钮）点击变色，原来的恢复原色，这里所说的并不是利用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/ K先生的博客
513
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
