怎么用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. sqoop产生背景及概述

    sqoop产生背景 多数是用Hadoop技术处理大数据业务的企业有大量的数据存储在传统的关系型数据库(RDBMS)中:由于缺乏工具的支持.对Hadoop和传统数据库系统中的数据进行相互传输是一件十分困 ...

  2. Sass、Less编译器koala及koala不支持中文字体的解决方法

    一款很好用的Sass编译器,还可以编译Less.coffeescript等 去官网下载适合自己电脑的版本 http://koala-app.com/index-zh.html 打开后拖动或者打开项目目 ...

  3. oracle创建表空间，表及用户

    oracle要创建表要首先创建表空间,当然默认是有表空间的.而mysql创建表时,会自动创建表空间,myisam会自动建三个文 件.MYD,.MYI,.frm.innodb呢,如果没有配置独立表空间的 ...

  4. leetcode235

    /** * Definition for a binary tree node. * public class TreeNode { * public int val; * public TreeNo ...

  5. leetcode258

    public class Solution { public int AddDigits(int num) { var str = num.ToString(); ; foreach (var c i ...

  6. win10/win7 笔记本 开启虚拟无线 批处理

    Microsoft Virtual WiFi Miniport Adapter 一.看网络网卡 有多出的这一项“Microsoft Virtual WiFi Miniport Adapter”,那么说 ...

  7. VSS SVN GIT SVN 加锁签出

    VSS TFS SVN GIT VSS 两大功能: 1.签出后加锁,别人不能签出,独占签出. 2.在服务端可以查看哪些用户签出了哪些文件. 3.查看所有签出未签入的文件列表,SVN未发现此功能. 缺点 ...

  8. J2SE 8的编译

    动态加载(修改)服务.高性动态业务逻辑实现(用脚本或模板引擎实现效率满足不了需求) package compile; import java.io.File; import java.io.IOExc ...

  9. Spring MVC 确定目标方法POJO 类型参数

    1:确定一个Key 2. 在implicitMode 中存在Key 对应的对象, 若存在则作为参数传入 3. 在implicitMode 中不存在Key 对应的对象, 则检查当前@SessionAtr ...

  10. Mysql日期时间Extract函数介绍

    MySQL日期时间Extract函数的优点在于可以选取日期时间的各个部分,从年一直到微秒,让我们对MySQL日期时间的处理更为轻松. MySQL 日期时间 Extract(选取)函数.1. 选取日期时 ...