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

Question

我没有任何Js，因为我是初学者。我想当我点击一个文本时它会改变颜色，但是当我点击其他文本时会改变颜色并且 return 之前的文本也会变成相同的颜色。

<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>

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

How to change text color when I click and change the other color of text

html

javascript

css

jquery

bootstrap-4