Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.51/104: Рейтинг темы: голосов - 104, средняя оценка - 4.51
0 / 0 / 0
Регистрация: 04.10.2011
Сообщений: 32
1

изменение цвета кнопок

30.12.2012, 18:56. Просмотров 20710. Ответов 8
Метки нет (Все метки)


Привет всем!
Помогите разобраться. У меня есть например 4 кнопки с определенным цветом:

HTML5
1
2
3
4
<input type="button"  id=b1 style="background: #fc0707;" value="Кнопка1">
<input type="button"  id=b2 style="background: #F6F6f6;" value="Кнопка2">
<input type="button"  id=b3 style="background: #F6F6f6;" value="Кнопка3">
<input type="button"  id=b4 style="background: #F6F6f6;" value="Кнопка4">
изначально одна из них отличается по цвету.
что хочу?
Хочу что бы при нажатии на кнопку 3 например, кнопка 1 становилась #F6F6f6, а кнопка 3 #fc0707.

как я это понимаю (но это не работает):

Javascript
1
2
document.getElementById('b2').style.backgroundColor.onclick = '#fc0707'
document.getElementById('b1').style.backgroundColor = '#F6F6f6'
и все это засунуть в конструкцию if/elseif ?

возможно вопрос и "нубский", но я только учусь.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
30.12.2012, 18:56
Ответы с готовыми решениями:

Фиксация цвета кнопок
Здравствуйте. Есть 10 кнопок. Текущее оформление кнопок следующее: - Каждая кнопка имеет...

Фиксация цвета кнопок
Здравствуйте. Есть десяток кнопок. После нажатия на любую кнопку зафиксировать её цвет. Да...

Изменение фона - плавное изменение цвета
Не фурычит плавное изменение цвета... Если переменные r g b через рандом то всё работает отлично...

Смена цвета кнопок при нажатии
Здравствуйте, У меня есть список в котором несколько кнопок. Мне нужно чтобы при нажатии на кнопку...

8
Эксперт по математике/физике
4144 / 2048 / 422
Регистрация: 19.07.2009
Сообщений: 3,102
Записей в блоге: 23
30.12.2012, 19:07 2
Если я правильно понял задачу, то так:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
function btnclick() {
    activebtn.style.backgroundColor = disactiveclr;
    (activebtn = this).style.backgroundColor = activeclr;
}
var disactiveclr = "#F6F6f6";
var activeclr = "#fc0707";
var activebtn = null;
function ld(){
    activebtn = document.getElementById("b1");
    for(var i=1; i<5; ++i) document.getElementById("b"+i).onclick=btnclick;
    alert("ready");
}
</script>
<body onload="ld();">
<input type="button"  id=b1 style="background: #fc0707;" value="Кнопка1">
<input type="button"  id=b2 style="background: #F6F6f6;" value="Кнопка2">
<input type="button"  id=b3 style="background: #F6F6f6;" value="Кнопка3">
<input type="button"  id=b4 style="background: #F6F6f6;" value="Кнопка4">
</body>
1
0 / 0 / 0
Регистрация: 04.10.2011
Сообщений: 32
30.12.2012, 20:04  [ТС] 3
спасибо за ответ, но немного не так. у вас получается кнопка окрашивается в другой цвет, при нажатии на нее.
а хотелось бы так:
1. с самого начала одна из кнопок красная - первая
2. я нажимаю на нее она меняет свой цвет на серый, но красной становится кнопка 3
4. я нажимаю кнопку 3 она меняет свой цвет на серый, но красной становится кнопка 4
5. я нажимаю кнопку 4 она меняет свой цвет на серый, но красной становится кнопка 1

вот как то так.

Добавлено через 32 минуты
получается сценарий на 4 действия
0
Эксперт по математике/физике
4144 / 2048 / 422
Регистрация: 19.07.2009
Сообщений: 3,102
Записей в блоге: 23
30.12.2012, 20:34 4
То есть нажатии на окрашенную кнопку она должна стать серой, а какая то другая должна окраситься в красный, так? Какая именно: случайно-выбранная или правая/левая? При нажатии на серую кнопку ничего не должно меняться?
0
0 / 0 / 0
Регистрация: 04.10.2011
Сообщений: 32
30.12.2012, 20:53  [ТС] 5
Цитата Сообщение от Mysterious Light Посмотреть сообщение
То есть нажатии на окрашенную кнопку она должна стать серой, а какая то другая должна окраситься в красный, так?
да именно.
Цитата Сообщение от Mysterious Light Посмотреть сообщение
Какая именно: случайно-выбранная или правая/левая?
скажем по сценарию в предыдущем моем посте. жмем 1 меняется 3
3->4
4->1
Цитата Сообщение от Mysterious Light Посмотреть сообщение
При нажатии на серую кнопку ничего не должно меняться?
нет цвета меняются должны только при нажатии на красную кнопку.
0
Эксперт по математике/физике
4144 / 2048 / 422
Регистрация: 19.07.2009
Сообщений: 3,102
Записей в блоге: 23
30.12.2012, 21:04 6
Тогда так:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function nextBtn(btn) {
    var n = btn.id;
    n = n=="b1" ? "b3" : (n=="b3" ? "b4" : "b1");
    return document.getElementById(n);
}
function btnclick() {
    activebtn.style.backgroundColor = disactiveclr;
    activebtn.onclick = null;
    activebtn = nextBtn(activebtn);
    activebtn.style.backgroundColor = activeclr;
    activebtn.onclick = btnclick;
}
var disactiveclr = "#F6F6f6";
var activeclr = "#fc0707";
var activebtn = null;
function ld(){
    (activebtn = document.getElementById("b1")).onclick=btnclick;
}
1
0 / 0 / 0
Регистрация: 04.10.2011
Сообщений: 32
30.12.2012, 21:48  [ТС] 7
да спасибо! все работает!
а тут еще такой нюанс, не могли бы вы рассказать как функция nextBtn работает?(что бы не просто код скопипастить)
0
Эксперт по математике/физике
4144 / 2048 / 422
Регистрация: 19.07.2009
Сообщений: 3,102
Записей в блоге: 23
30.12.2012, 22:13 8
Javascript
1
2
3
4
5
6
7
8
9
10
11
function nextBtn(btn) {
    // определяем id нажатой (активной) кнопки
    var n = btn.id;
    // определяем id следующей кнопки по правилу
    // b1 -> b3
    // b3 -> b4
    // остальное -> b1
    n = (n=="b1" ? "b3" : (n=="b3" ? "b4" : "b1"));
    // возвращаем новую активную кнопку
    return document.getElementById(n);
}
Можно так:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function nextBtn(btn) {
    // определяем id нажатой (активной) кнопки
    var n;
    // определяем id следующей кнопки по правилу
    // b1 -> b3
    // b3 -> b4
    // остальное -> b1
    if(btn.id=="b1") n = "b3";
    else
        if(btn.id == "b3") n = "b4";
        else n = "b1";
    // возвращаем новую активную кнопку
    return document.getElementById(n);
}
1
11 / 11 / 2
Регистрация: 19.12.2012
Сообщений: 177
02.01.2013, 12:06 9
Почти тоже самое было необходимо и мне. Если поможет, обсуждения в этой теме:
Выделить активный пункт меню
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
02.01.2013, 12:06

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь или здесь.

Изменение состояния нескольких кнопок
Здравствуйте! Кому не сложно, подскажите, как можно сделать следующую вещь: есть 2 одинаковые...

Изменение текста по нажатию кнопок
Есть текст и три кнопки. Нажимая кнопки текст меняется: Первая кнопка-цвет красный, размер 10px....

Изменение размера шрифта без кнопок
Доброго времени суток. Надеюсь, вы сможете мне помочь, завтра уже нужно это показывать, стипендия...

Изменение кнопок
Здравствуйте, имеется 4 кнопки и 1 текст. Требуется при нажатии на любую из кнопок, меняются...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.