用JS怎么实现点击一个文字变成红色，再点击其它文字，原本变成红色的文字恢复原样，被点击的文字变成红色！！
1 回答
慕莱坞森
TA贡献1810条经验 获得超4个赞
给您写了一个纯JS版本的
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var demo=document.getElementsByClassName("content");
function changeColor(self){
var demo=document.getElementsByClassName("content");
for(var i=0;i<demo.length;i++){
console.log(demo[i]);
if(demo[i].style.color="#FF0000"){
demo[i].style.color="#000000";
}
}
self.style.color="#ff0000";
}
</script>
<style type="text/css">
a{text-decoration-line: none;}
.content{color:#000000;}
.red{color:#FF0000;}
</style>
</head>
<body>
<a href='javascript:void(0);' class="content red" onclick="changeColor(this)">段落一</a>
<a href='javascript:void(0);' class="content" onclick="changeColor(this)">段落二</a>
<a href='javascript:void(0);' class="content" onclick="changeColor(this)">段落三</a>
<a href='javascript:void(0);' class="content" onclick="changeColor(this)">段落四</a>
</body>
</html>预览效果是这样的（由于不同浏览器的原因，请忽略颜色，运行起来的效果是您要的）：
<br> var demo=document.getElementsByClassName("content");<br> function changeColor(self){ <br> var demo=document.getElementsByClassName("content");<br> for(var i=0;i<demo.length;i++){<br> console.log(demo[i]);<br> if(demo[i].style.color="#FF0000"){<br> demo[i].style.color="#000000";<br> }<br> } <br> self.style.color="#ff0000"; <br> }<br>
<style type="text/css">
a{text-decoration-line: none;}
.content{color:#000000;}
.red{color:#FF0000;}
</style>
</head>
<body>
<a href='javascript:void(0);' class="content red" onclick="changeColor(this)">段落一</a>
<a href='javascript:void(0);' class="content" onclick="changeColor(this)">段落二</a>
<a href='javascript:void(0);' class="content" onclick="changeColor(this)">段落三</a>
<a href='javascript:void(0);' class="content" onclick="changeColor(this)">段落四</a>
</body>添加回答
举报
0/150
提交
取消