怎么用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;
}
}收起
我这样写的可以改变,但是当页面刷新的时候又变成白色了!
<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;
}
}收起
推荐于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>
其他回答
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
为何不用Jquery?
宿命2711 | 发布于2014-05-05
举报|
0 1
收起 其他3条回答