Question

我对UI世界很陌生。我在静态html页面遇到问题。

（请注意我们的项目中没有使用任何JS框架，请帮我使用纯java脚本代码）

现在我要存档的是，当我点击YAHOO时，它应该变成橙色并且谷歌＆amp;冰白当我点击GOOGLE时，它应该变成橙色和Yahoo＆amp;白了当我点击BING时，它应该变成橙色并且雅虎＆amp;谷歌白色

1）在我的html页面中，我有多个链接，如下面的

<a href="www.yahoo.com">Yahoo</a>
<a href="www.google.com">Google</a> 
<a href="www.bing.com">Bing</a>

2）我有一个CSS文件，其中包含以下内容，

a {text-decoration: none}
a:link, a:visited {text-decoration: none;color: white;}
a:hover {text-decoration: none; color: #FF9900;}

Answer 1

编辑：编辑功能//使用PURE JS // UPDATED FIDDLE

为每个链接添加id和onclick属性，例如：

<a href="#" id="googleLink" onclick="changeColor(this)">Google</a><br />
<a href="#" id="yahooLink" onclick="changeColor(this)">Yahoo</a><br />
<a href="#" id="bingLink" onclick="changeColor(this)">Bing</a>

使用javascript函数更改颜色：

function changeColor(link) {
document.getElementById(link).className = "activeLink";
if(link == "googleLink"){
  document.getElementById("yahooLink").className = "";
  document.getElementById("bingLink").className = "";
   }
if(link == "yahooLink"){
  document.getElementById("googleLink").className = "";
  document.getElementById("bingLink").className = "";
   }
if(link == "bingLink"){
  document.getElementById("googleLink").className = "";
  document.getElementById("yahooLink").className = "";
   }
}

并使用此css设置样式：

.activeLink{
    color: orange;
}
.activeLink:hover{
    color: orange; // *so the active link would not change color on mouse hover
}

更改<a> tags using java script</a>的颜色

1 个答案: