Hello.

It is necessary to do so that when one of the 4 buttons is activated, a separate display opens and the last active display hides.

Please tell me how to implement it correctly on JS?

An example of such buttons (works on the bootstrap) https://jsfiddle.net/35r3zbtp/

<div class="btn-group" data-toggle="buttons">

    1 answer 1

     $('#tabs label').click(function() { $('.btn-danger').removeClass('btn-danger'); $(this).tab('show').addClass('btn-danger'); }); 
     #tabs label input{ display: none; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div id="tabs" class="nav nav-tabs btn-group"> <label class="btn btn-primary btn-danger" id="option1" data-target="#content1"> <input type="radio" name="options"> Параметр 1 </label> <label class="btn btn-primary" id="option2" data-target="#content2"> <input type="radio" name="options"> Параметр 2 </label> <label class="btn btn-primary" id="option3" data-target="#content3"> <input type="radio" name="options"> Параметр 3 </label> </div> <div class="tab-content"> <div class="tab-pane active" id="content1">Tab content 1</div> <div class="tab-pane" id="content2">Tab content 2</div> <div class="tab-pane" id="content3">Tab content 3</div> </div>

    • But how to make the buttons change? like here? forts.pro - Igor