尝试更改按钮的颜色以显示使用 javascript 显示的图像

Question

我正在尝试更改按钮的颜色以显示使用 javascript 显示的图像。类似于：CSS 中的活动...我一直在寻找几个小时，我已经设法改变了页面上的几乎所有其他元素，除了我真正想要改变的那个，我只需要改变被点击按钮的背景颜色，然后恢复到原始颜色点击不同的按钮.任何帮助将不胜感激.....

<! doctype html>
<html>

<head>
<title>Task 2</title>


<!--styles-->

<style>
    body {
        margin: 0;
        background-color: mediumpurple;
    }
    header {
        margin: auto;
        width: 90%;
        background-color: orangered;
        height: 50px;
        text-align: center;
    }
    #content {
        width: 80%;
        background-color: green;
        margin: auto;
    }
    nav {
        float: left;
        background-color: greenyellow;
        width: 30%;
        height: 750px;
        text-align: center;
    }
    #pictureFrame {
        float: left;
        width: 70%;
        height: 750px;
        background-color: deeppink;
    }
    footer {
        margin: auto;
        width: 90%;
        background-color: orangered;
        height: 50px;
        text-align: center;
        clear: both;
    }
    .button {
        margin-top: 100px;
        background-color: white;
        border-radius: 20px;
        width: 70%;
        height: 75px;
    }
    #img {
        margin-top: 19%;
        margin-left: 35%;
        width: 300px;
        height: 300px;
    }
</style>

<script type="text/javascript">
    function pic1() {
        document.getElementById("img").src = "images/starbucks.png";

    }

    function pic2() {
        document.getElementById("img").src = "images/muffin.png";
    }

    function pic3() {
        document.getElementById("img").src = "images/costa.png";
    }
</script>


</head>

<body>


<header>
    <h1>Coffee</h1>
</header>

<section id="content">


    <div id="pictureFrame">

        <img src="" id="img" />

    </div>
    <nav>

        <button id="button1" class="button"  onclick="pic1()">Starbucks</button>
        <br/>
        <br/>
        <button id="button2" class="button" onclick="pic2()">Muffin    Break</button>
        <br/>
        <br/>
        <button id="button3" class="button"   onclick="pic3()">Costa</button>
  </nav>
</section>



<footer>
    <h1>This is a footer</h1>
</footer>


</body>

</html>

Answer 1

通过单击每个按钮，只需使用 style.background='color' 更改该按钮的背景。同时重置其他两个按钮的颜色。只需创建一个函数来重置背景颜色。

<script type="text/javascript">

    function reset(){
            document.getElementById("button1").style.background='white';
            document.getElementById("button2").style.background='white';
            document.getElementById("button3").style.background='white';
    }

    function pic1() {
        document.getElementById("img").src = "images/starbucks.png";
        reset();
        document.getElementById("button1").style.background='red';
    }

    function pic2() {
        document.getElementById("img").src = "images/muffin.png";
        reset();
        document.getElementById("button2").style.background='red';
    }

    function pic3() {
        document.getElementById("img").src = "images/costa.png";
        reset();
        document.getElementById("button3").style.background='red';
    }
</script>

Fiddle : https://jsfiddle.net/tintucraju/6dkt0bs2/

尝试更改按钮的颜色以显示使用 javascript 显示的图像

Trying to change colour of a button to show which images is displayed with javascript

javascript

html

javascript-events