Так что я хочу иметь динамическую галерею изображений. Когда вы нажимаете кнопки пейзажа, другая выделенная кнопка меняет свой стиль на стиль по умолчанию, в то время как кнопка пейзажа, которую я нажал, меняет стиль, по которому щелкнули. Я хочу, чтобы каждая кнопка, которую я нажимал, сбрасывала любую кнопку, которая была нажата по умолчанию, и меняла кнопку, которую я щелкнул, на новый стиль нажатия.
Я пытаюсь использовать прослушиватели событий с функциями для каждой кнопки, нажатие которой приводит к сбросу, иустановить стили.
Структура - это кнопка по умолчанию, которая находится в нажатом состоянии. Поэтому я установил его стили в 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";
}