如何使用多个按钮更改 javascript 的按钮颜色？

Question

function go(loc) {
    var iframe = document.getElementById("iframe");
    iframe.style.display = "block";
    document.getElementById('iframe').src = loc;
    document.getElementById("p").innerHTML = "";
}

html, body {cursor: url(files/cursor.cur), progress !important;Height:100%;}
html {background-image:url(files/bg.jpg);background-attachment:fixed;background-position:center;background-size:cover;}
body {width:80%;background-color:rgba(255,255,255,0.8);margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;}
p {margin-right:10px;margin-left:10px;}
iframe {overflow: hidden; height: 80%; width: 100%;}
img {display:block;margin-left:auto;margin-right:auto;}

table {border-collapse:collapse; font-family:calibri;border-style: outset;border-color:#FFFF00;border-width:5px;s}
td {font-size:16px;border-width:1px;border-style:solid;border-color:#FFFF00;background-color:#FFFFFF}
th {font-size:18px;font-weight:bold;background-color:#FFEE00;border-color:#FFFF00;border-style:solid;border-width:1px;}

.font1 {font-family:calibri;font-size:16px;}
.font2 {font-family:calibri;font-size:18px;text-decoration:underline;}

#menu1 a {display: block; background-color: #0066FF; text-decoration: none; font-family: calibri; font-size: 20px; color: #FFFFFF; padding: 10px 10px;} 
#menu1 a:hover {background-color: #0088FF;} 
#menu1 li {display: inline-block;} 
#menu1 ul {list-style: none; text-align: center; margin: 0 auto; padding:0px;}

#menu2 a {display: block; background-color: #0066FF; text-decoration: none; font-family: calibri; font-size: 16px; color: #FFFFFF; padding: 10px 10px;} 
#menu2 a:hover {background-color: #0088FF;} 
#menu2 li {display: inline-block;} 
#menu2 ul {list-style: none; text-align: center; margin: 0 auto; padding:0px;}

<!DOCTYPE html>
<html style="height:105%;">
<head>
    <title>Foto's</title>
    <link rel="icon" type="image" href="files/icon.png">
    <link rel="stylesheet" href="style.css">
    <script src="files/javascript.js"></script>
</head>
<body>
<br>

<div id="menu1">
    <ul>
        <li><a href="index.html">Welkom</a></li>
        <li><a href="agenda.html">Agenda</a></li>
        <li><a href="fotos.html">Foto's</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</div>
<br>

<div id="menu2">
    <ul>
        <li><a onclick="go('camera/1993-1994.html')">1993-1994</a></li>
        <li><a onclick="go('camera/1994-2003.html')">1994-2003</a></li>
        <li><a onclick="go('camera/2003-2004.html')">2003-2004</a></li>
        <li><a onclick="go('camera/2005-2006.html')">2005-2006</a></li>
        <li><a onclick="go('')">2006-2007</a></li>
        <li><a onclick="go('')">2007-2008</a></li>
        <li><a onclick="go('')">2008-2009</a></li>
        <li><a onclick="go('')">2009-2010</a></li>
        <li><a onclick="go('')">2010-2011</a></li>
        <li><a onclick="go('')">2011-2012</a></li>
        <li><a onclick="go('')">2012-2013</a></li>
        <li><a onclick="go('')">2013-2014</a></li>
        <li><a onclick="go('')">2014-2015</a></li>
    </ul>
</div>
<p class="font1" id="p" align="center">Kies een schooljaar om de foto's te zien.</p>
<iframe id="iframe" src="about:blank" frameborder="0"></iframe>
</body>
</html>

我试图在不给每个按钮单独的 ID 的情况下单击按钮时使按钮的颜色变浅。有没有办法让我的 javascript 找到被点击的按钮，以便它可以改变它的颜色？此外，当它不再处于活动状态时，它应该恢复到原来的颜色。如果有 html 或 css 的解决方案，那也很好。

谢谢。

Answer 1

在这种情况下，我更喜欢 .each jQuery function; But If you want to write pure-JS, you have to get an array of button elements using getElementsByClassName() 函数。

Answer 2

我看到你没有使用 jQuery，所以我会坚持使用没有 jQuery 的 CSS/JavaScript 解决方案。

四个简单的步骤：

为 selected/active 按钮创建一个 CSS 样式：
```
a.active {
    background-color: #FF0000; 
}
```

使用this将按钮传递给go()函数：

<a onclick="go('camera/1993-1994.html', this)">1993-1994</a>

并且在 JavaScript 中：

function go(loc, this) {
    var iframe = document.getElementById("iframe");  
    iframe.style.display="block";
    document.getElementById('iframe').src = loc;
    document.getElementById("p").innerHTML = "";
}

修改 go() 函数以从任何活动按钮（如果有）中删除 class active；和
将 active class 添加到作为 this 传递的按钮。

生成的 go() 函数如下所示：

    function go(loc, obj){
        // if there's an active link, remove the active class
        if (document.querySelector(".active")) {
            document.querySelector(".active").className = document.querySelector(".active").className.replace(" active",""); }
        // add the active class to the current link
        obj.className = obj.className + " active";

        // the rest is the same
        var iframe = document.getElementById("iframe");  
        iframe.style.display="block";
        document.getElementById('iframe').src = loc;
        document.getElementById("p").innerHTML = "";
    }

最终代码如下所示（根据您的原始代码修改）：

function go(loc, obj){

    // NEW
    if (document.querySelector(".active")) {
        document.querySelector(".active").className = document.querySelector(".active").className.replace(" active",""); 
    }
    obj.className = obj.className + " active";

  var iframe = document.getElementById("iframe");  
  iframe.style.display="block";
  document.getElementById('iframe').src = loc;
  document.getElementById("p").innerHTML = "";
}

html, body {cursor: url(files/cursor.cur), progress !important;Height:100%;}
html {background-image:url(files/bg.jpg);background-attachment:fixed;background-position:center;background-size:cover;}
body {width:80%;background-color:rgba(255,255,255,0.8);margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;}
p {margin-right:10px;margin-left:10px;}
iframe {overflow: hidden; height: 80%; width: 100%;}
img {display:block;margin-left:auto;margin-right:auto;}

table {border-collapse:collapse; font-family:calibri;border-style: outset;border-color:#FFFF00;border-width:5px;s}
td {font-size:16px;border-width:1px;border-style:solid;border-color:#FFFF00;background-color:#FFFFFF}
th {font-size:18px;font-weight:bold;background-color:#FFEE00;border-color:#FFFF00;border-style:solid;border-width:1px;}

.font1 {font-family:calibri;font-size:16px;}
.font2 {font-family:calibri;font-size:18px;text-decoration:underline;}

/** NEW **/
a.active { background-color: red !important; }

#menu1 a {display: block; background-color: #0066FF; text-decoration: none; font-family: calibri; font-size: 20px; color: #FFFFFF; padding: 10px 10px;} 
#menu1 a:hover {background-color: #0088FF;} 
#menu1 li {display: inline-block;} 
#menu1 ul {list-style: none; text-align: center; margin: 0 auto; padding:0px;}

#menu2 a {display: block; background-color: #0066FF; text-decoration: none; font-family: calibri; font-size: 16px; color: #FFFFFF; padding: 10px 10px;} 
#menu2 a:hover {background-color: #0088FF;} 
#menu2 li {display: inline-block;} 
#menu2 ul {list-style: none; text-align: center; margin: 0 auto; padding:0px;}

<!DOCTYPE html>
<html style="height:105%;">
<head>
<title>Foto's</title>
<link rel="icon" type="image" href="files/icon.png">
<link rel="stylesheet" href="style.css">
<script src="files/javascript.js"></script>
</head>
<body>
<br>
<div id="menu1"><ul><li><a href="index.html">Welkom</a></li><li><a href="agenda.html">Agenda</a></li><li><a href="fotos.html">Foto's</a></li><li><a href="contact.html">Contact</a></li></ul></div>
<br>
<div id="menu2"><ul><li><a onclick="go('camera/1993-1994.html',this)">1993-1994</a></li><li><a onclick="go('camera/1994-2003.html',this)">1994-2003</a></li><li><a onclick="go('camera/2003-2004.html',this)">2003-2004</a></li><li><a onclick="go('camera/2005-2006.html',this)">2005-2006</a></li><li><a onclick="go('',this)">2006-2007</a></li><li><a onclick="go('',this)">2007-2008</a></li><li><a onclick="go('',this)">2008-2009</a></li><li><a onclick="go('',this)">2009-2010</a></li><li><a onclick="go('',this)">2010-2011</a></li><li><a onclick="go('',this)">2011-2012</a></li><li><a onclick="go('',this)">2012-2013</a></li><li><a onclick="go('',this)">2013-2014</a></li><li><a onclick="go('',this)">2014-2015</a></li></ul></div>
<p class="font1" id="p" align="center">Kies een schooljaar om de foto's te zien.</p>
<iframe id="iframe" src="about:blank" frameborder="0"></iframe>
</body>
</html>

Answer 3

这会向所有 li a 元素添加一个 click 处理程序，恢复所有 li a 元素的背景，然后将被单击元素的样式设置为不同的颜色。

它在一个闭包中，所以 a 集合是一个私有变量。

(function() {
  var a= document.querySelectorAll('li a');

  [].forEach.call(a, function(el) {
    el.addEventListener('click', function() {
      [].forEach.call(a, function(el) {
        el.style.background= '';
      });
      this.style.background= '#88f';
    });
  });
})();

function go(loc) {
    var iframe = document.getElementById("iframe");
    iframe.style.display = "block";
    document.getElementById('iframe').src = loc;
    document.getElementById("p").innerHTML = "";
}

(function() {
  var a= document.querySelectorAll('li a');

  [].forEach.call(a, function(el) {
    el.addEventListener('click', function() {
      [].forEach.call(a, function(el) {
        el.style.background= '';
      });
      this.style.background= '#88f';
    });
  });
})();

html, body {cursor: url(files/cursor.cur), progress !important;Height:100%;}
html {background-image:url(files/bg.jpg);background-attachment:fixed;background-position:center;background-size:cover;}
body {width:80%;background-color:rgba(255,255,255,0.8);margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;}
p {margin-right:10px;margin-left:10px;}
iframe {overflow: hidden; height: 80%; width: 100%;}
img {display:block;margin-left:auto;margin-right:auto;}

table {border-collapse:collapse; font-family:calibri;border-style: outset;border-color:#FFFF00;border-width:5px;s}
td {font-size:16px;border-width:1px;border-style:solid;border-color:#FFFF00;background-color:#FFFFFF}
th {font-size:18px;font-weight:bold;background-color:#FFEE00;border-color:#FFFF00;border-style:solid;border-width:1px;}

.font1 {font-family:calibri;font-size:16px;}
.font2 {font-family:calibri;font-size:18px;text-decoration:underline;}

#menu1 a {display: block; background-color: #0066FF; text-decoration: none; font-family: calibri; font-size: 20px; color: #FFFFFF; padding: 10px 10px;} 
#menu1 a:hover {background-color: #0088FF;} 
#menu1 li {display: inline-block;} 
#menu1 ul {list-style: none; text-align: center; margin: 0 auto; padding:0px;}

#menu2 a {display: block; background-color: #0066FF; text-decoration: none; font-family: calibri; font-size: 16px; color: #FFFFFF; padding: 10px 10px;} 
#menu2 a:hover {background-color: #0088FF;} 
#menu2 li {display: inline-block;} 
#menu2 ul {list-style: none; text-align: center; margin: 0 auto; padding:0px;}

<!DOCTYPE html>
<html style="height:105%;">
<head>
    <title>Foto's</title>
    <link rel="icon" type="image" href="files/icon.png">
    <link rel="stylesheet" href="style.css">
    <script src="files/javascript.js"></script>
</head>
<body>
<br>

<div id="menu1">
    <ul>
        <li><a href="index.html">Welkom</a></li>
        <li><a href="agenda.html">Agenda</a></li>
        <li><a href="fotos.html">Foto's</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</div>
<br>

<div id="menu2">
    <ul>
        <li><a onclick="go('camera/1993-1994.html')">1993-1994</a></li>
        <li><a onclick="go('camera/1994-2003.html')">1994-2003</a></li>
        <li><a onclick="go('camera/2003-2004.html')">2003-2004</a></li>
        <li><a onclick="go('camera/2005-2006.html')">2005-2006</a></li>
        <li><a onclick="go('')">2006-2007</a></li>
        <li><a onclick="go('')">2007-2008</a></li>
        <li><a onclick="go('')">2008-2009</a></li>
        <li><a onclick="go('')">2009-2010</a></li>
        <li><a onclick="go('')">2010-2011</a></li>
        <li><a onclick="go('')">2011-2012</a></li>
        <li><a onclick="go('')">2012-2013</a></li>
        <li><a onclick="go('')">2013-2014</a></li>
        <li><a onclick="go('')">2014-2015</a></li>
    </ul>
</div>
<p class="font1" id="p" align="center">Kies een schooljaar om de foto's te zien.</p>
<iframe id="iframe" src="about:blank" frameborder="0"></iframe>
</body>
</html>

这是 jQuery 等价物：

$('li a').click(function() {
  $('li a').css('background', '');
  $(this).css('background', '#88f');
});

如何使用多个按钮更改 javascript 的按钮颜色？

How to change button colors wth javascript with multiple buttons?

html

javascript

css

button