拨开荷叶行,寻梦已然成。仙女莲花里,翩翩白鹭情。
IMG-LOGO
主页 文章列表 单击并更改文本的其他颜色时如何更改文本颜色

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

白鹭 - 2022-01-23 2014 0 0

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

uj5u.com热心网友回复:

这段代码应该适合你:)

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>

标签:

0 评论

发表评论

您的电子邮件地址不会被公开。 必填的字段已做标记 *