怎么用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. 链接mysql的两种方法

    使用mysql二进制方式连接 您可以使用MySQL二进制方式进入到mysql命令提示符下来连接MySQL数据库. 实例 以下是从命令行中连接mysql服务器的简单实例: [root@host]# my ...

  2. python中发布订阅和主从配置

    发布订阅 发布者不是计划发送消息给特定的接收者(订阅者),而是发布的消息分到不同的频道,不需要知道什么样的订阅者订阅 订阅者对一个或多个频道感兴趣,只需接收感兴趣的消息,不需要知道什么样的发布者发布的 ...

  3. XMind8 安装

    参考:https://blog.csdn.net/qq_35911589/article/details/81901868 https://blog.csdn.net/Zjhao666/article ...

  4. HTML5 Canvas 小例子 旋转的图片

    <一>CSS部分 @charset "utf-8"; *{ padding:; margin:; outline: none; } #canvas{ position: ...

  5. php缓存类

    <?php /* * 缓存类 cache * 实 例: include( "cache.php" ); $cache = new cache(30); $cache-> ...

  6. jdk下载--操作系统

    不同的操作系统需要下载不同的jdk. 查看操作系统的命令: Window系统下:>winver Linux和Unix系统下: >uname -a 根据系统不同选用不同的jdk: 下载地址: ...

  7. HibernateTemplate使用注意点

    1.  findByExample(vo) 可轻松根据vo的内部数据作为参数查找数据,vo中的基本类型不能为null,同时不支持主键查找. 2. get(vo.class, id) 根据主键来查找数据 ...

  8. Java中3种代理总结（示例代码见之前文章）

    1.JDK静态代理 业务接口 接口的实现类 代理类,实现接口,并扩展实现类的功能 ### 2.JDK动态代理 业务接口 实现了业务接口的业务类 实现了InvocationHandler接口的handl ...

  9. 了解innodb_support_xa（分布式事务）

    innodb_support_xa可以开关InnoDB的xa两段式事务提交.默认情况下,innodb_support_xa=true,支持xa两段式事务提交.此时MySQL首先要求innodb pre ...

  10. java工程中不能存在多个数据库连接jar包

    java工程中不能存在多个数据库连接jar包 比如存在mysql-java-connector.jar的,放入mssqlserver.jar就会产生冲突.只能存在一个类型的jar包.