HTML中点击文字后变色,再点击下一段文字时,下一段文字变色，之前的一段文字颜色恢复原来颜色

你的名字 2022-05-24 02:50 241阅读 0赞

**index.js**

function HideOrShowFont(obj) \{  
            if (obj == "a1") \{  
                document.getElementById("a1").style.color = "\#2577e3";   
                document.getElementById("a2").style.color = "\#333";  
                document.getElementById("a3").style.color = "\#333";

else if (obj == 'a2') \{

document.getElementById("a1").style.color = "\#333";   
                document.getElementById("a2").style.color = "\#2577e3";  
                document.getElementById("a3").style.color = "\#333";  
            \}  
            else if (obj == 'a3') \{  
                document.getElementById("a1").style.color = "\#333";   
                document.getElementById("a2").style.color = "\#333";  
                document.getElementById("a3").style.color = "\#2577e3";  
            \}

**index.html**

<head>  
<script type="text/javascript" src="../js/index.js"></script>  //引入index.js文件

</head>

<body>

<li><a href="javascript:HideOrShowFont('a1')" id="a1">全部积分</a></li>  /\* id与js中的obj一致。与javascript:HideOrShowFont('a1') 中的a1一致\*/

<body>

效果图：

![20180518200329713][]

![20180518200349523][]

[20180518200329713]: /images/20220524/6ef0e46fadd941c09ee7f92b2fe08ed9.png
[20180518200349523]: /images/20220524/6bb8797780bb4b309bfd854db7824ef5.png