怎么用js设置a标签点击链接改变当前颜色 20

例如：多个a标签为白色，当点击其中一个a标签时改变那一个a标签的字体颜色为黄色，并且跳转到对应链接，当点击下一个a标签链接时，下一个为黄色，之前一个恢复成白色，

我这样写的可以改变，但是当页面刷新的时候又变成白色了！
<li><a id="a1" href="a.html" onclick="Change(this.id)">A</a></li>
<li><a id="a2" href="a.html" onclick="Change(this.id)">B </a></li>
<li><a id="a3" href="a.html" onclick="Change(this.id)">C</a></li>
<li><a id="a4" href="a.html" onclick="Change(this.id)">D</a></li>
function Change(id) {
var OldColor='#FFFFFF';
var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++)
{
if(a[i].id==id)
a[i].style.color='#FF9900'; 
else
a[i].style.color=OldColor;
}
}收起

 

牵说 | 浏览 8967 次  问题未开放回答 |举报

推荐于2017-09-05 00:18:28

 

最佳答案

 
改变当前颜色
<lable id="lable1" onclick="col(1)">1</lable>
<lable id="lable2" onclick="col(2)">2</lable>
<lable id="lable3" onclick="col(3)">3</lable>
<script language="javascript">
function col(num)
{
for(i=1;i<6;i++)
{
  if(i==num)
    document.getElementById("lable"+i).backgroudcolor=Red;
  else
    document.getElementById("lable"+i).backgroudcolor=Black;
}
}
</script>
 
 本回答由电脑网络分类达人 朱冬梅推荐
举报| 评论

1 8
 

du瓶邪

采纳率：92% 来自团队：百度知道电脑团 擅长： 电脑/网络 生活 电子数码

其他回答

a:visited {color: #00FF00} /* 已访问的链接 */ css搞定。
 
追问
这样没办法刷新，会把所有访问过的全都变成这种颜色，之前点击的不会恢复成白色
 
追答
你是说需要实现刷新这个功能啊 ，那需要进行本地存储了哈。可以采用cookie
 
追问
具体教一下呢，  没做过不知道怎么弄呢
 
追答

摘自W3CSchool：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=")
  if (c_start!=-1)
    { 
    c_start=c_start + c_name.length+1 
    c_end=document.cookie.indexOf(";",c_start)
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    } 
  }
return ""
}
 
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
 
function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
  {alert('Welcome again '+username+'!')}
else 
  {
  username=prompt('Please enter your name:',"")
  if (username!=null && username!="")
    {
    setCookie('username',username,365)
    }
  }
}
</script>
</head>
 
<body onLoad="checkCookie()">
</body>
</html>

上面我想你只需要知道如何读取cookie和如何存储cookie就行了。

 本回答被网友采纳
liangdd168 | 发布于2014-05-05
举报| 评论

2 19
静态页面无法实现 页面重新加载后js所设置的css样式无效了 可以使用cookie，页面加载的时候再设置
 
追问
可以举一个具体例子吗
yeyingzimo | 发布于2014-05-05
举报| 评论

1 0
HTML+CSS+JS，是无法保存页面状态的，如果想保存哪个网页是最后一次点击的，可以存到cookie里。页面加载的时候再读取
lqc282545665 | 发布于2014-05-05
举报| 评论

0 0
用cookie或 web sql database（需要浏览器支持html5）
热心网友| 发布于2014-05-05
举报| 评论

0 0
为何不用Jquery?
宿命2711 | 发布于2014-05-05
举报| 评论

0 1
收起 其他3条回答

怎么用js设置a标签点击链接改变当前颜色的更多相关文章

  1. js模拟form表单提交数据, js模拟a标签点击跳转，避开使用window.open引起来的浏览器阻止问题

    js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...

  2. js 设置img标签的src资源无法找到的替代图片(通过img的属性设置)

    在网站的前端页面设计中,要考虑到img图片资源的存在性,如果img的src图片资源不存在或显示不出来,则需要显示默认的图片.如何做到呢? 一.监听document的error事件 document.a ...

  3. js控制a标签点击事件 触发下载

    问题背景,动态获取data把url赋值到a标签的url中,让a标签自动下载 首先想到的应该是$('xxx').click(), 查资料明白:js中的$(...).click()事件只能触发绑定的onC ...

  4. 使用js设置input标签只读 readonly 属性

    先上代码: <html> <head> <title> test </title> <meta charset="utf-8" ...

  5. 设置a标签，实现点击跳转页面的两种效果

    设置a标签,实现点击跳转页面 这个问题,主要是设置a标签的属性target,下面对target属性进行描述: 跳转在同一个窗口 1,target="_self",  它使得目标文档 ...

  6. a标签点击跳转失效--IE6、7的奇葩bug

    一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...

  7. 使用JS对HTML标签进行增删改查

    以下为通过JS对li标签进行简单的增删改查: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

  8. <a>多颜色标签点击之后保持原色的一次实践， Ext Panel下解决及通用方案思路

    代码为片段, 需要自行设置全部环境方可全部运行. 案例背景 使用Ext开发了一个表格,需要根据一列值来动态设置颜色. 效果如下: 说明: 不同行显示不同的内容, 作为标题行, 可以点击链接到其他地方. ...

  9. js如何实现动态点击改变单元格颜色？

    js如何实现动态点击改变单元格颜色? 一.总结 1.通过table的rows属性,遍历表格所有行,然后通过cells属性,遍历每一行中的单元格. 2.遍历的过程中,动态的为每一个单元格定义单击事件,改 ...

随机推荐

  1. android官方文档翻译（不断更新中。。。）

    最近在自学android,抽空把官方文档的guide跟training差不多看了一遍,又对比了一些书籍,感觉还是官方文档讲得比较好,所以自己计划把官方文档翻译一下,方便自己的知识巩固以及复习查找,由于 ...

  2. THREE.JS 场景世界坐标和平面二维坐标互转

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  3. XCode iOS Simulator 模拟器

    XCode7.3下,默认带了iOS 9.3 Simulator,iOS 8.4 Simulator总是安装不成功. mac os X,里的模拟器,全屏 ,windows win键+1/2/3 切换全屏 ...

  4. Spring事务控制和传递性理解

    1.在同一类方法间相互调用,如果调用方无事务控制,被调用方有事务控制,则被调用方也无事务 原因:外部经过spring容器调用service的方法事务才生效,service类内部方法间相互调用事务不生效 ...

  5. vue深入了解组件——Prop

    一.Prop的大小写(camelCase vs kebab-case) HTML中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用DOM中的模板时,cameCase ...

  6. python生成可执行文件保护源码

    工作中由于需要防止源代泄漏,需要将源代码隐藏,找到两种方法: 1.使用python生成的pyc文件. 这种方法的优点就是pyc文件生成很容易,缺点则是很容易通过工具得到源码,并且python版本不一致 ...

  7. Java 如何产生UUID

    1.UUID 简介 UUID含义是通用唯一识别码 (Universally Unique Identifier),这是一个软件建构的标准,也是被开源软件基金会 (Open Software Found ...

  8. git cherry-pick用法

    场景: 如果你的应用已经发布了一个版本2.0, 代码分支叫release-2.0, 现在正在开发3.0, 代码的分支叫dev-3.0. 那么有一天产品说, 要把正在开发的某个特性提前上线, 也就是说要 ...

  9. fio 测试磁盘

    root@rook-test:/# ceph osd status+----+-----------------------------+-------+-------+--------+------ ...

  10. Dubbo 分布式服务框架

    要想了解Dubbo是什么,我们不防先了解它有什么用. 使用场景:比如我想开发一个网上商城项目,这个网上商城呢,比较复杂,分为pc端web管理后台,微信端销售公众号,那么我们分成四个项目,pc端网站,微 ...