【发布时间】：2019-10-03 23:34:50
【问题描述】：
所以我想要一个动态图片库。当您单击风景按钮时，另一个突出显示的按钮将其样式更改为默认样式，而我单击的风景按钮更改为单击的样式。我希望我单击的每个按钮都将任何单击的按钮重置为默认值，并将我单击的按钮更改为新的单击样式。
我正在尝试对每个单击的按钮使用具有函数的事件侦听器来重置和设置样式。
结构是处于单击状态的默认按钮。所以我在css中设置了它的样式。但是当我点击抽象按钮时，它应该将结构化按钮更改为默认样式，并将其本身更改为单击样式，为什么它没有更改？
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<section id="painting-buttons">
<div class="container">
<div class="buttons">
<button id="structures"
class="button-solid black-button" onclick="location.href='#'"
type="button">
Structures
</button>
<button id="abstract"
class="button-solid black-button"
onclick="location.href='#'"
type="button">
Abstract
</button>
<button id="oil"
class="button-solid black-button"
onclick="location.href='#'"
type="button">
Oil
</button>
<button id="landscapes"
class="button-solid black-button"
onclick="location.href='#'"
type="button">
Landscapes
</button>
</div>
</div>
</section>
<script src="app.js"></script>
</body>
</html>
css
.button-solid {
display: inline-block;
background: transparent;
border: none;
font-size: 15px;
margin: 10px 0;
padding: 12px 40px;
color: #000;
text-decoration: none;
animation-delay: 0.6s;
border-radius: 5px;
white-space: nowrap;
float: left;
}
.button-solid:hover {
background: #31aece;
border-color: #31aece;
color: #fff;
transition: background 0.4s ease 0s;
transition-property: background;
transition-duration: 0.4s;
transition-timing-function: ease;
transition-delay: 0s;
cursor: pointer;
}
.button-transparent {
display: inline-block;
background: transparent;
border-style: solid;
border-width: 2px;
border-color: #fff;
font-size: 15px;
margin: 10px 0;
padding: 6px 30px;
color: #FFFFFF;
text-decoration: none;
animation-delay: 0.6s;
border-radius: 5px;
white-space: nowrap;
float: left;
height: 40px;
}
.button-transparent a:hover {
background: #fff;
border-color: #fff;
color: #DB170D;
transition: background 0.4s ease 0s;
transition-property: background;
transition-duration: 0.4s;
transition-timing-function: ease;
transition-delay: 0s;
cursor: pointer;
}
/*-- -------------------------- -->
<--- PAINTINGS -->
<--- -------------------------- -*/
#painting-buttons {
height: auto;
}
.buttons button {
width: 45%;
padding: 10px 20px !important;
margin: 10px auto;
border: 1px solid #000;
}
.buttons {
height: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 400px;
margin: 40px 0;
}
/* Default Button Focus */
#structures {
color: #fff;
background: #31AECE;
border: none;
}
javascript
/* Button click events for the paintings, etchings, and sculptures pages */
/* Button varibale assignment */
var structures = document.getElementById("structures");
var abstract = document.getElementById("abstract");
var oil = document.getElementById("oil");
var landscapes = document.getElementById("landscapes");
/*Button Gets Clicked */
structures.addEventListener("click", function(clickStructures));
abstract.addEventListener("click", function(clickAbstract));
function clickStructures() {
/*Structures Button Clicked Style */
structures.style.background = "#31AECE";
structures.style.color = "#fff";
structures.style.border = "none";
/* Reset Abstract Button */
abstract.style.background = "transparent";
abstract.style.color = "#000";
abstract.style.border = "#000";
/* Reset Oil Button */
oil.style.background = "transparent";
oil.style.color = "#000";
oil.style.border = "#000";
/* Reset Landscape Button */
landscape.style.background = "transparent";
landscape.style.color = "#000";
landscape.style.border = "#000";
}
function clickAbstract() {
/*Abstract Button Clicked Style */
abstract.style.background = "#31AECE";
abstract.style.color = "#fff";
abstract.style.border = "none";
/* Reset Structures Button */
structures.style.background = "transparent";
structures.style.color = "#000";
structures.style.border = "#000";
/* Reset Oil Button */
oil.style.background = "transparent";
oil.style.color = "#000";
oil.style.border = "#000";
/* Reset Landscape Button */
landscape.style.background = "transparent";
landscape.style.color = "#000";
landscape.style.border = "#000";
}
【问题讨论】：
标签： javascript css dom button addeventlistener