Как изменить цвет кнопки после нажатия другой кнопки

Question

Я хочу, чтобы мои кнопки меняли цвет после нажатия на другую кнопку. На данный момент у меня есть идея ... но это создаст больше html-страниц, которые не то, что я хочу. В приведенном ниже коде есть 3 кнопки, где button1 установлен как темно-серый, а кнопки2 и кнопка 3 светло-серые. Нажатие кнопки2 или кнопки 3 должно измениться на темно-серый, а кнопка1 должна быть светло-серой. Я пробовал исследовать в Интернете и не нашел для этого никакого решения.

Примечание: Я создал свои кнопки с помощью div.

Вот отрывок из моего кода:

.select:hover { 
 
    background-color: #2a2a2a; 
 
} 
 
.select:visited { 
 
    background-color: pink; 
 
} 
 
.bcardunlaminated { 
 
    display: table-cell; 
 
    height: 37px; 
 
    width: 210px; 
 
    float: left; 
 
    background-color: #2a2a2a; 
 
    text-align: left; 
 
    margin-top: 10px; 
 
    line-height: 36px; 
 
} 
 
.bcardmatt { 
 
    display: table-cell; 
 
    height: 37px; 
 
    width: 225px; 
 
    float: left; 
 
    background-color: #757575; 
 
    text-align: left; 
 
    margin-left: 3px; 
 
    margin-top: 10px; 
 
    line-height: 36px; 
 
} 
 
.bcardspotuv { 
 
    display: table-cell; 
 
    height: 37px; 
 
    width: 230px; 
 
    float: left; 
 
    background-color: #757575; 
 
    text-align: left; 
 
    margin-left: 3px; 
 
    margin-top: 10px; 
 
    line-height: 17px; 
 
} 
 
.mat-font { 
 
    color: white; 
 
    font-size: 9pt; 
 
    text-align: center; 
 
}

<div class="materialtable"> 
 
    <div class="materialrow"> 
 
    <a href="javascript:;" id=" hideaway1" onclick="document.getElementById('hideaway1').style.display='block';document.getElementById('hideaway2').style.display='none'; 
 
    \t \t \t document.getElementById('hideaway3').style.display='none';toggleTable();return false"> 
 
     <div class="bcardunlaminated select"> 
 
     <div class="mat-font">1</div> 
 
     </div> 
 
    </a> 
 
    <a href="javascript:;" id=" hideaway2" onclick="document.getElementById('hideaway1').style.display='none';document.getElementById('hideaway2').style.display='block'; 
 
    \t \t \t document.getElementById('hideaway3').style.display='none';toggleTable2();return false"> 
 
     <div class="bcardmatt select"> 
 
     <div class="mat-font">2</div> 
 
     </div> 
 
    </a> 
 
    <a href="javascript:;" id=" hideaway3" onclick="document.getElementById('hideaway1').style.display='none';document.getElementById('hideaway2').style.display='none'; 
 
    \t \t \t document.getElementById('hideaway3').style.display='block';toggleTable3();return false"> 
 
     <div class="bcardspotuv select"> 
 
     <div class="mat-font">3</div> 
 
     </div> 
 
    </a> 
 
    </div> 
 
</div> 
 
<br/> 
 
<br/> 
 
<br/> 
 
<div id="hideaway1" style="display:block;">1</div> 
 
<div id="hideaway2" style="display:none;">2</div> 
 
<div id="hideaway3" style="display:none;">3</div>

Любые предложения?

Answer 1

Вот пример того, что я думаю, что вы ищете: http://jsfiddle.net/f60z1nj3/2/

с помощью JQuery:

$(function() { 
$('.test').click(function(){ 
      if ($(this).hasClass('darkGrey')){ 
      $(this.children).removeClass('darkGrey') 
     } 
     else 
     { 
      $(this.children).addClass('darkGrey'); 
      $(this).siblings().children().removeClass('darkGrey'); 
     } 
    }) 
}); 

Так что я только что ваши выбираемых элементов класса вместо идентификатора, который немного меньше специфично, чем с использованием идентификатора. Затем это простое событие onlclick для добавления и удаления класса выделения, который я назвал darkGrey. Я не включил переключение div в нижней части, так как похоже, что у вас есть функция, чтобы справиться с этим.

Answer 2

Просто добавьте изменения в backgroundColor. Я использую оранжевый здесь, используйте тот, который вы хотите.

<a href="javascript:;" id=" hideaway3" onclick="document.getElementById('hideaway1').style.display='none';document.getElementById('hideaway2').style.display='none'; 
       document.getElementById('hideaway3').style.display='block';document.getElementById('hideaway1').style.backgroundColor='#f60';toggleTable3();return false"> 

Вы должны использовать уникальные идентификаторы, вы используете то же самое с пространством впереди, что делает его очень запутанным и багги

Answer 3

Мое предложение - с помощью JQuery, так как это, кажется, вы не возражаете, что на основании вашего принятого ответа:

Вам нужно будет изменить toggleTable принять IDX для переключения. Вероятно, вы также захотите сделать контейнер div из ссылок интерактивным, а не ссылкой. Вам нужно будет добавить курсор: ponter в CSS

$(function() { 
    $(".select").on("click",function(e){ 
    e.preventDefault(); // only needed if .select are links 
    var idx = $.trim($(this).text()); 
    $(".hideaway").hide(); 
    $("#hideaway"+idx).show(); 
    toggleTable(idx); 
    }); 
}); 

HTML:

<div class="materialtable"> 
    <div class="materialrow"> 
     <div class="bcardunlaminated select"> 
     <div class="mat-font"> 
      1 
     </div> 
     </div> 
     <div class="bcardmatt select"> 
     <div class="mat-font"> 
      2 
     </div> 
     </div> 
     <div class="bcardspotuv select"> 
     <div class="mat-font"> 
      3 
     </div> 
     </div> 
    </a> 
    </div> 
</div> 
<br/> 
<br/> 
<br/> 
<div id="hideaway1" class="hideaway">1</div> 
<div id="hideaway2" class="hideaway">2</div> 
<div id="hideaway3" class="hideaway">3</div>