单击并更改文本的其他颜色时如何更改文本颜色

Question

因为我是初学者，所以我没有任何 Js。 我希望当我点击一个文本时它会改变颜色，但是当点击其他文本时会改变颜色并将以前的文本返回到相同的颜色。

 <div class="mt-5 first-member" onclick="document.getElementById('myImage').src='./assets/images/person-team.png'"> <span> <small> <sup>01</sup> </small> </span> <h1> Alexandr Bruegel</h1> </div> <div class="mt-3 other-member" onclick="document.getElementById('myImage').src='./assets/images/bg-img.png'"> <span> <small> <sup>02</sup> </small> </span> <h1>Ann Fowler</h1> </div>

Answer 1

这段代码应该适合你:)

 document.querySelector('.mt-5').addEventListener('click',function(){ //document.getElementById('myImage').src='./assets/images/person-team.png' document.getElementById('text1').style.color = 'red' document.getElementById('text2').style.color = 'black' }) document.querySelector('.mt-3').addEventListener('click',function(){ //document.getElementById('myImage').src='./assets/images/bg-img.png' document.getElementById('text2').style.color = 'red' document.getElementById('text1').style.color = 'black' })

 <div class="mt-5 first-member" > <span> <small> <sup>01</sup> </small> </span> <h1 id='text1'> Alexandr Bruegel</h1> </div> <div class="mt-3 other-member" > <span> <small> <sup>02</sup> </small> </span> <h1 id='text2'>Ann Fowler</h1> </div>