Кнопки Bootstrap не подсвечиваются при нажатии

Question

У меня есть приложение с 3 кнопками, 3 кнопки делают вызов AJAX для извлечения некоторых данных и перерисовывают таблицу с данными. Однако при нажатии кнопки кнопка должна быть подсвечена, чтобы пользователь знал, какие данные они просматривают.

Это код JS, который вызывается метод Web API:

iniciativasEstrategicas.GetVistaActividades = function (filtro) { 
     var idObjetivoValue = sessionStorage.idObjetivoValue; 
     $('#tab_vista1').html('<br><br><br><img class="loadImage" src="Images/loader.gif" />'); 
     $.ajax({ 
      url: 'IniciativasEstrategicasWebPart/GetVistaActividades', 
      type: 'POST', 
      data: { 
       idObjetivo: idObjetivoValue, 
       filtro: filtro 
      }, 
      success: function (data) { 
       drawVistaActividades(data); 
      }, 
      error: function (data) { 
       showErrorMessage(data); 
      } 
     }); 
    } 

Это метод, который рисует данные:

function drawVistaActividades(data) { 
     resetBreadCrumb(); 
     var html = ""; 
     for (var i = 0; i < data.length; i++) { 
      html += template.rowVistaActividades 
       .replace("{0}", data[i].nombreActividad) 
       .replace("{1}", data[i].iniciativaName) 
       .replace("{2}", data[i].fechaVencimiento) 
       .replace("{3}", data[i].fechaRealTerminacion) 
       .replace("{4}", data[i].responsables); 
     } 
     $("#tab_vistaActividades").html("<br>" + "<br>" + template.tableVistaActividades.replace("{0}", html)); 
    } 

Это шаблон таблицы, который я использую, чтобы рисовать данные, а также кнопки есть

tableVistaActividades: "<div>" + 
            "<div>" + 
             "<div class=\"btn-group\" role=\"group\" aria-label=\"Basic example\">" + 
              "<button type=\"button\" class=\"btn btn-default\" onclick=\"iniciativasEstrategicas.GetVistaActividades('A tiempo')\">A tiempo</button>" + 
              "<button type=\"button\" class=\"btn btn-default\" onclick=\"iniciativasEstrategicas.GetVistaActividades('Atrasadas')\">Atrasadas</button>" + 
              "<button type=\"button\" class=\"btn btn-default\" onclick=\"iniciativasEstrategicas.GetVistaActividades('Pendientes')\">Pendientes</button>" + 
             "</div>" + 
            "</div>" + 
            "<table class='table'>" + 
             "<thead>" + 
              "<tr>" + 
               "<th>" + 
                "Actividad" + 
               "</th>" + 
               "<th>" + 
                "Iniciativa" + 
               "</th>" + 
               "<th>" + 
                "Fecha propuesta" + 
               "</th>" + 
               "<th>" + 
                "Fecha real terminación" + 
               "</th>" + 
               "<th>" + 
                "Responsables" + 
               "</th>" + 
              "</tr>" + 
             "</thead>" + 
             "<tbody>" + 
              "{0}" + 
             "</tbody>" + 
            "</table>" +"<div>", 

и строка шаблона

rowVistaActividades: "<tr>" + 
         "<td>" + 
          "{0}" + 
         "</td>" + 
         "<td>" + 
          "{1}" + 
         "</td>" + 
         "<td>" + 
          "{2}" + 
         "</td>" + 
         "<td>" + 
          "{3}" + 
         "</td>" + 
         "<td>" + 
          "{4}" + 
         "</td>" + 
        "</tr>", 

Как вы можете видеть в this page.

Мы используем тот же код кнопки Bootstrap, и на этой странице кнопка остается подсвеченной при нажатии.

Answer 1

Это должно решить вашу проблему, в основном вам нужно добавить «активный» к выбранному параметру и удалить «активный» из выбранных ранее братьев и сестер.

$(".btn-group > .btn").click(function(){ 
    $(this).addClass("active").siblings().removeClass("active"); 
    $(this).addClass("active"); 
}); 

Answer 2

Как @taTrifynor сказал в комментарии, вы должны просто использовать Button groups с input type="radio", читайте about it. Например:

JSFiddle

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="btn-group" data-toggle="buttons"> 
 
    <label class="btn btn-primary active"> 
 
     <input type="radio" name="options" id="option1" autocomplete="off" checked="checked"/>Button 1 (preselected) 
 
    </label> 
 
    <label class="btn btn-primary"> 
 
     <input type="radio" name="options" id="option2" autocomplete="off"/>Button 2 
 
    </label> 
 
    <label class="btn btn-primary"> 
 
     <input type="radio" name="options" id="option3" autocomplete="off"/>Button 3 
 
    </label> 
 
</div>

Или я не понимаю, что вы хотите.