如何使用按钮来更改其他按钮的样式？

问题描述 投票：0回答：1

所以我想拥有一个动态图片库。当您单击景观按钮时，另一个高亮显示的按钮将其样式更改为默认样式，而我单击的景观按钮将更改为单击的样式。我希望我单击的每个按钮将所有被单击的按钮重置为默认按钮，并将我单击的按钮更改为新的单击样式。

我正在尝试将事件监听器与每个单击按钮以重置和设置样式的功能一起使用。

结构是默认按钮，处于其单击状态。因此，我在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
1个回答
0
投票

您是否在ccs样式中使用伪类“：focus”进行了尝试？示例：

         .button:focus{
                        color: green;
                }
0
投票

概念上，您正在使用切换状态。因此，您应该能够减少它来打开和关闭。

您可以将这两种样式包装为两个类（缩写形式）。 

`.on{background:#31AECE;
 .off{backround:transparent;`

然后您需要将元素移动到数组。

'var structures = document.getElementById("structures");
 var abstract = document.getElementById("abstract");
 var oil = document.getElementById("oil");
 var landscapes = document.getElementById("landscapes");'


 var butts = [oil, structures, abstract, etc];

并添加着色事件

for(var i = 0; i < butts.length; i += 1){
buttons[i].addEventListener('click', function (e) {
    e.target.toggleClass('on');
});

}

您需要告诉所有不在click事件中的按钮来切换它们州

buttons.toggleClass（'off'）;

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.