javascript - 按下按钮时突出显示文本部分

Question

这是我第一次编写 HTML/Javascript。我有很多按钮，当按下它们时，它们会改变图像 - 一切都很好。

我还想在按下按钮后突出显示图像中发生的情况的描述。当按下其他按钮之一时，它还需要返回到不突出显示的状态。

我尝试过 if 语句等，但我似乎无法让它工作。

这是我到目前为止所拥有的:

<button class="rbutton" onclick="R1Change()" style="position:absolute; Left:47.1%; Top: 70.7%; z-index: +1"></Button>

function R1Change() { 
    var img = document.getElementById("image"); 
    img.src="S1.png"; 
    return false; 
}

有什么建议吗？

Answer 1

这是一个用普通 JavaScript 编写的简单示例(没有 jQuery 或其他库)。

关键部分是更改 target 元素/描述的样式属性(我还添加了一些简短的注释来告诉您脚本的作用)。

description.style.backgroundColor = 'orange'

var button = document.getElementById('button'); // find button
var description = document.getElementById('figcaption'); // find description
var changeDescription = function() {
  // change color for the description
  description.style.backgroundColor = 'orange';
};
button.addEventListener('click', function(event) {
  // detect click on button
  changeDescription();
});

<button id="button">Clcik me please</Button>

<figure>
  <img src="http://pipsum.com/435x310.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption id="figcaption">Fig1. - Your description here.</figcaption>
</figure>

或者，您也可以使用 classList .

description.classList.add("yourClass");