超链接（按钮）点击变色，原来的恢复原色

网页超链接（按钮）点击变色，原来的恢复原色，这里所说的并不是利用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先生的博客

超链接（按钮）点击变色，原来的恢复原色相关推荐

js实现按钮点击变色，其他的按钮恢复默认颜色
JavaScript实现按钮点击变色,其他的按钮恢复默认颜色,则需通过循环实现,当有按钮点击的时候,先将所有的按钮的颜色,更改为空,然后在针对,鼠标点击的相应的按钮,进行更改按钮颜色: onclick ...
卡片右上角三角形效果,按钮点击变色
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 效果图: 实现代码: <view class='privilege_list'><v ...
Androidstudio之TextView点击变色
使用环境: 1 文字信息点击变色 1.1 点击变色,再点击恢复颜色 1.2 点击变色,松开恢复 1.1 处理方法: <TextViewandroid:layout_marginTop=" ...
android按钮点击变化,Android实现按钮点击效果（第一次点击变色，第二次恢复）...
1.首先创建一个按钮 android:id="@+id/click" android:layout_width="fill_parent" android:la ...
Android实现按钮点击效果（第一次点击变色，第二次恢复）
1.首先创建一个按钮 <Button android:id="@+id/click" android:layout_width="fill_parent" ...
vue项目-点击添加或者修改按钮浏览器的屏幕变黑，再次点击屏幕之后浏览器恢复正常（火狐浏览器、ChromeCoreLauncher双核浏览器）
今天在写springboot+vue项目的时候发现了一个bug,之前写的项目就没有这种情况,bug如下: 点击添加或者修改按钮浏览器的屏幕变黑,再次点击屏幕之后浏览器恢复正常点击修改按钮屏幕变黑 ...
PowerPoint超链接点击变色
大家对PowerPoint一定很熟悉了!作为一名小学生,在班里没少见老师用课件,我也经常看到我妈做课件(她是中学老师). 今天一海口的同学问我说怎么给超链接点击变色,说点一下就跳转走,再回去时就成别的 ...
C++ 主程序中打开子程序窗口隐藏，操作控件遍历窗口控件句柄EnumChildWindows()；获取其他程序进度条数据操作选择框按钮点击
1.线程启动子程序 ShowWindow(hWnd, SW_SHOW)显示 ShowWindow(hwnd, SW_HIDE);隐藏 system_hide(L"Odin3.exe&quo ...
前端＜a＞标签超链接，触发点击事件后弹出about:blank#blocked页
一.问题描述今天碰到一个特别奇怪的问题,我在点击一个超链接按钮后,会弹出一个about:blank#blocked页,原页面后续逻辑也会继续走下去,难受的点就是为什么会弹出这么一个页面. 二.问题分 ...

超链接（按钮）点击变色，原来的恢复原色

超链接（按钮）点击变色，原来的恢复原色相关推荐

最新文章

热门文章