如何使用带有多个按钮的javascript更改按钮颜色
How to change button colors wth javascript with multiple buttons?
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的解决方案，那也没关系。
谢谢。
我看到您没有使用jQuery，所以我将坚持使用没有jQuery的CSS/JavaScript解决方案。
四个简单步骤：
-
创建特定于所选/活动按钮的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()功能，从激活的任何按钮（如果有）中删除类别active；和 -
将
active类添加到作为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>在这种情况下，我更喜欢.each jQuery函数；但是，如果您想编写纯JS，您必须使用getElementsByClassName（）函数获得一个按钮元素数组。
这将向所有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');
});
相关文章：
- 复制当前url按钮-Javascript
- 通过提示中的循环触发iFrame中的输入按钮(JavaScript）
- 在单击按钮时激活按钮的悬停状态，直到单击另一个按钮(Javascript/JQuery）
- 从导航按钮 JavaScript 中删除动画
- IE8中的FB共享按钮Javascript错误
- 表单验证上的彩色单选按钮-Javascript
- 通过一个按钮JAVASCRIPT更改style.display在多个对象上的显示
- 变暗图像滑块/按钮 - Javascript
- 下载pdf/word按钮javascript /jquery
- 带有单选按钮 JavaScript 的随机测验
- C# Web 浏览器 - 如何单击此按钮 (Javascript）
- 获取按钮 Javascript 的宽度，不带“px”
- 自动点击提交按钮 javascript
- 保存和关闭按钮 javascript
- 使用按钮 javascript 在 forloop 中创建 Cookie
- 搜索下一个按钮 javascript
- 保存状态单选按钮javascript html
- 使用类型按钮javascript提交表单
- 点击提交按钮Javascript HTML后显示表格数据
- 使用%用单按钮JavaScript函数交换图像
