Переключить и развернуть три кнопки

Question

У меня есть три кнопки, и я хочу переключаться между ними. Как я могу добавлять и удалять классы toggle и untoggle, которые нужно соответствующим образом переключаться. Прямо сейчас обе кнопки можно выбрать/переключить. Одновременно может переключаться только одна кнопка, но я также хочу, чтобы можно было отменить выбор/разблокировать все кнопки. Так что у меня есть возможность не включать кнопки.

Вот кнопки, на мой взгляд:

<div id="drawing"> 
    <div style="margin-top: 12px; padding-left: 8px; margin-bottom: 8px"> 
    <button class="small-button" onclick="Drawing.AngleClick()" data-val-btnname="Angle" style="width: 70px; height: 20px;"><span>@Culture.GetString("Angle")</span></button> 
</div> 
<div style="margin-top: 12px; padding-left: 8px;"> 
    <button class="small-button" onclick="Drawing.PointClick()" data-val-btnname="Point" style="width: 70px; height: 20px;"><span style="font-size:10px !important">@Culture.GetString("Point")</span></button> 
    <button class="small-button" data-val-btnname="ClearAll" style="width: 70px;" onclick="Drawing.Delete()"><span>@Culture.GetString("ClearAll")</span></button> 
</div> 
</div> 

Вот функция JS до сих пор для одной из кнопок (у меня есть то же самое, если заявление в моей другой кнопки):

AngleClick: function() { 
    var button = $('body').find("button[data-val-btnname='Angle']"); 

    if (button.hasClass('small-toggled-button')) { 
     button.removeClass('small-toggled-button').addClass('small-button'); 
    } else { 
     button.removeClass('small-button').addClass('small-toggled-button'); 
    } 
} 

Answer 1

Это это простой способ переключения кнопок. Запустите фрагмент, чтобы увидеть, как он работает. Я упростил ваш HTML только ради сокращения примера - Я не предлагаю вам его изменить.

$(document).ready(function() { 
 
    $("#drawing button").click(function(e) { 
 
    var isActive = $(this).hasClass('active'); 
 
    $('.active').removeClass('active'); 
 
    if (!isActive) { 
 
     $(this).addClass('active'); 
 
    } 
 
    }); 
 
});

.active { 
 
    background: #555555; 
 
    color: #ffffff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="drawing"> 
 
    <button class="small-button">Angle</button> 
 
    <button class="small-button">Point</button> 
 
    <button class="small-button">ClearAll</button> 
 
</div>