06
Июл
2022

Реализация кнопок через JavaScript

У меня имеется вот такое меню:

введите сюда описание изображения

Мне нужно, что бы при нажатии на кнопку, свойство в css менялось с background-position: left x px top 0px на background-position: left x px top 32px, и сразу же на background-position: left x px top -32px. Так как для кнопок я использую один png:

введите сюда описание изображения

При этом после нажатия на другую кнопку, предыдущая возвращалась к начальному background-position.

У меня получилось сделать изменение свойства только один раз, т.к. setTimeout() не сработал. При этом после нажатия на кнопку она навсегда остаётся "зажатой".

Мой код HTML

<div class="buttons">
    <div class="btn_1" onclick="change_btn_1(this)"></div>
    <div class="btn_2" onclick="change_btn_2(this)"></div>
    <div class="btn_3" onclick="change_btn_3(this)"></div>
</div>

CSS

.buttons {
    position: absolute;
    z-index: 1;
    width: 196px;
    height: 32px;
}

.btn_1 {
    position: absolute;
    left: 4px;
    width: 60px;
    height: 32px;
    background-image: url(../images/body_buttons.png);
    background-position: left 0px top 0px;
}

.btn_2 {
    position: absolute;
    left: 68px;
    width: 60px;
    height: 32px;
    background-image: url(../images/body_buttons.png);
    background-position: left -60px top 0px;
}

.btn_3 {
    position: absolute;
    left: 132px;
    width: 60px;
    height: 32px;
    background-image: url(../images/body_buttons.png);
    background-position: left 60px top 0px;
}

JS

function change_btn_1(ind) {
    ind.style.backgroundPosition = "left 0px top 32px";
    ind.style.backgroundPosition = "left 0px top -32px";
}

function change_btn_2(ind) {
    ind.style.backgroundPosition = "left -60px top 32px";
    ind.style.backgroundPosition = "left -60px top -32px";
}

function change_btn_3(ind) {
    ind.style.backgroundPosition = "left 60px top 32px";
    ind.style.backgroundPosition = "left 60px top -32px";
}

Источник: https://ru.stackoverflow.com/questions/1427340/%D0%A0%D0%B5%D0%B0%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BE%D0%BA-%D1%87%D0%B5%D1%80%D0%B5%D0%B7-javascript

Тебе может это понравится...

Добавить комментарий