Задать вопрос
@Brad_baf

Изменение цвета кнопки при нажатии?

Есть страница с двумя таблицами кнопок. Мне нужно чтоб при нажатии кнопки с классом "default", менялся цвет кнопок без класса на зеленый, а при следующем нажатии на кнопку с классом "default", цвет кнопок без класса менялся с зеленого на красный(например нажимаю я в верхней стеке кнопок на единицу, и цвет кнопки с единицей в нижней стеке кнопок менялся на зеленый, а потом после нажатие с зеленого на красный поменялся).

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    button.default {
      background: white;
      width: 80px;
      height: 80px;
      font-size: 40pt;
      transition: background 9999999s;
    }

    button.default:active {
      background: red;
      transition: background 0s;
    }

  </style>

</head>

<body>
    <table>
        <tr>
          <td><button class="default"> 1</button></td>
          <td><button class="default"> 2</button></td>
          <td><button class="default"> 3</button></td>
          <td><button class="default"> 4</button></td>
          <td><button class="default"> 5</button></td>
          <td><button class="default"> 6</button></td>
          <td><button class="default"> 7</button></td>
          <td><button class="default"> 8</button></td>
          <td><button class="default"> 9</button></td>
          <td><button class="default">10</button></td>
        </tr>
        <tr>
            <td><button class="default">11</button></td>
            <td><button class="default">12</button></td>
            <td><button class="default">13</button></td>
            <td><button class="default">14</button></td>
            <td><button class="default">15</button></td>
            <td><button class="default">16</button></td>
            <td><button class="default">17</button></td>
            <td><button class="default">18</button></td>
            <td><button class="default">19</button></td>
            <td><button class="default">20</button></td>
          </tr>
          <tr>
            <td><button class="default">21</button></td>
            <td><button class="default">22</button></td>
            <td><button class="default">23</button></td>
            <td><button class="default">24</button></td>
            <td><button class="default">25</button></td>
            <td><button class="default">26</button></td>
            <td><button class="default">27</button></td>
            <td><button class="default">28</button></td>
            <td><button class="default">29</button></td>
            <td><button class="default">30</button></td>
          </tr>
          <tr>
            <td><button class="default">31</button></td>
            <td><button class="default">32</button></td>
            <td><button class="default">33</button></td>
            <td><button class="default">34</button></td>
            <td><button class="default">35</button></td>
            <td><button class="default">36</button></td>
            <td><button class="default">37</button></td>
            <td><button class="default">38</button></td>
            <td><button class="default">39</button></td>
            <td><button class="default">40</button></td>
          </tr>
          <tr>
            <td><button class="default">41</button></td>
            <td><button class="default">42</button></td>
            <td><button class="default">43</button></td>
            <td><button class="default">44</button></td>
            <td><button class="default">45</button></td>
            <td><button class="default">46</button></td>
            <td><button class="default">47</button></td>
            <td><button class="default">48</button></td>
            <td><button class="default">49</button></td>
            <td><button class="default">50</button></td>
          </tr>
      </table>
      <table>
        <tr>
          <td><button> 1</button></td>
          <td><button> 2</button></td>
          <td><button> 3</button></td>
          <td><button> 4</button></td>
          <td><button> 5</button></td>
          <td><button> 6</button></td>
          <td><button> 7</button></td>
          <td><button> 8</button></td>
          <td><button> 9</button></td>
          <td><button>10</button></td>
        </tr>
        <tr>
            <td><button>11</button></td>
            <td><button>12</button></td>
            <td><button>13</button></td>
            <td><button>14</button></td>
            <td><button>15</button></td>
            <td><button>16</button></td>
            <td><button>17</button></td>
            <td><button>18</button></td>
            <td><button>19</button></td>
            <td><button>20</button></td>
          </tr>
          <tr>
            <td><button>21</button></td>
            <td><button>22</button></td>
            <td><button>23</button></td>
            <td><button>24</button></td>
            <td><button>25</button></td>
            <td><button>26</button></td>
            <td><button>27</button></td>
            <td><button>28</button></td>
            <td><button>29</button></td>
            <td><button>30</button></td>
          </tr>
          <tr>
            <td><button>31</button></td>
            <td><button>32</button></td>
            <td><button>33</button></td>
            <td><button>34</button></td>
            <td><button>35</button></td>
            <td><button>36</button></td>
            <td><button>37</button></td>
            <td><button>38</button></td>
            <td><button>39</button></td>
            <td><button>40</button></td>
          </tr>
          <tr>
            <td><button>41</button></td>
            <td><button>42</button></td>
            <td><button>43</button></td>
            <td><button>44</button></td>
            <td><button>45</button></td>
            <td><button>46</button></td>
            <td><button>47</button></td>
            <td><button>48</button></td>
            <td><button>49</button></td>
            <td><button>50</button></td>
          </tr>
      </table>
</body>

</html>
  • Вопрос задан
  • 5888 просмотров
Подписаться 1 Простой Комментировать
Решения вопроса 1
MagnusDidNotBetray
@MagnusDidNotBetray
Самый елеустремленный человек
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы