怎么用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. SOAP，RESTFull以及RPC的认识

    a.一般的系统,开发都是针对数据库开发,不存在系统之间的交互,但是随着现实是有好多系统(好多DB,DB不开放),这些系统之间要进行交互,就像人一样要互相帮助.所以      可以通过一下的方式: 1. ...

  2. MySQL 创建数据库的两种方法

    使用 mysqladmin 创建数据库 使用普通用户,你可能需要特定的权限来创建或者删除 MySQL 数据库. 所以我们这边使用root用户登录,root用户拥有最高权限,可以使用 mysql mys ...

  3. Openstack kvm win7镜像制作

    本文地址http://www.cnblogs.com/tcicy/p/7790956.html 网上找了很多为openstack制作win7镜像的文章,总是不成功 自己写一下,以便大家查看. 我使用c ...

  4. ajax 使用 三种方法 设置csrf_token的装饰器

    1. CSRF中间件   CSRF跨站请求伪造 2. 补充两个装饰器  from django.views.decorators.csrf import csrf_exempt, csrf_prote ...

  5. Fork-Join 原理深入分析（二）

      本文是将 Fork-Join 复杂且较为庞大的框架分成5个小点来分析 Fork-Join 框架的实现原理,一个个点地理解透 Fork-Join 的核心原理. 1. Frok-Join 框架的核心类 ...

  6. linux教程

    linux视频教程:尚观 http://www.uplinux.com/shipin/linuxyong-hu-guan-li-zhi-yong-hu-guan-li-01 一,linux开机(cen ...

  7. C#_Markov_心得感想

    来到实验室正好有一个月了,趁着端午假期稍微轻松一些,在大改程序体系之前,想将自己在这30天中工作之一Markov回顾一下,将从真实的写程序中学习到的知识.思想记录下来.希望能和大家积极讨论! 本文会以 ...

  8. 微信公众号开发者模式自定义菜单 node

    纯属分享 var config = require('./admin/wx/config/config'); var API = require('wechat-api'); var api = ne ...

  9. hibernate 三种状态

    JPA是Java Persistence API的简称,中文名Java持久层API. 因JPA是由Hibernate的创建者编写,因此和Hibernate基本相似一致.JPA由不同的服务解析,因此在w ...

  10. YAML描述与Python的对应关系

    YAML是"YAML Ain't a Markup Language"的首字母缩写,其语法简单,结构通过空格来展示,(列表)项目使用"-"来代表,(字典)键值对 ...