怎么用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. oracle 收集的一些图

    ================================================ ================================================ da ...

  2. 洛谷：：P1972 [SDOI2009]HH的项链

    题目背景 无 题目描述 HH 有一串由各种漂亮的贝壳组成的项链.HH 相信不同的贝壳会带来好运,所以每次散步完后,他都会随意取出一段贝壳,思考它们所表达的含义.HH 不断地收集新的贝壳,因此,他的项链 ...

  3. python拓展1 week1-week5复习回顾

    知识内容: 1.python基础概念及基础语法 2.python基础数据类型 3.python模块相关 4.python函数相关 5.python面向对象相关 6.python文件处理相关 注:本节内 ...

  4. tomcat原理分析与简单实现

    tomcat原理分析与简单实现 https://blog.csdn.net/u014795347/article/details/52328221 2016年08月26日 14:48:18 卫卫羊习习 ...

  5. python+selenium+requests爬取我的博客粉丝的名称

    爬取目标 1.本次代码是在python2上运行通过的,python3的最需改2行代码,用到其它python模块 selenium 2.53.6 +firefox 44 BeautifulSoup re ...

  6. 使border处于边框内

    box-sizing需要指定高度,它在这个高度出现,不会增加额外的高度 .box{box-sizing: border-box;height: 64px;}

  7. uva-10392-因数分解

    #include<stdio.h> #include<iostream> #include<queue> #include<memory.h> #inc ...

  8. springMVC之Interceptor拦截器

    转自:https://blog.csdn.net/qq_25673113/article/details/79153547 Interceptor拦截器用于拦截Controller层接口,表现形式有点 ...

  9. 2.mybatis实战教程(mybatis in action)之二：以接口的方式编程

    转自:http://www.yihaomen.com/article/java/304.htm 前面一章,已经搭建好了eclipse,mybatis,mysql的环境,并且实现了一个简单的查询. 请注 ...

  10. python之类的相关知识

    面向对象技术简介 类: 用来描述具有相同的属性和方法的对象的集合.它定义了该集合中每个对象所共有的属性和方法.对象是类的实例. 类变量:类变量在整个实例化的对象中是公用的.类变量定义在类中且在函数体之 ...