【问题标题】:How to change text color when I click and change the other color of text单击并更改文本的其他颜色时如何更改文本颜色
【发布时间】:2022-01-12 19:31:19
【问题描述】:

因为我是初学者,所以我没有任何 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>

【问题讨论】:

  • 您在帖子中标记了 JS、HTML 和 CSS(以及更多),但没有提供任何内容。您能否创建一个最小的可重现错误示例并将其添加到您的帖子中
  • 我只有一个想法,我想实现它

标签: javascript html jquery css bootstrap-4


【解决方案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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2014-12-24
    • 1970-01-01
    • 2021-05-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-01-20
    相关资源
    最近更新 更多